{"id":8,"date":"2026-09-16T11:33:08","date_gmt":"2026-09-16T11:33:08","guid":{"rendered":"https:\/\/web.yasinarafat.me\/?page_id=8"},"modified":"2026-09-16T12:38:14","modified_gmt":"2026-09-16T12:38:14","slug":"portfolio","status":"publish","type":"page","link":"https:\/\/web.yasinarafat.me\/","title":{"rendered":"Portfolio"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e999b5b e-con-full e-flex e-con e-parent\" data-id=\"e999b5b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-070925d elementor-widget elementor-widget-html\" data-id=\"070925d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= START: YASIN ARAFAT PORTFOLIO ================= -->\r\n<style>\r\n  \/* ===== RESET & BASE ===== *\/\r\n  .ya-wrapper *, .ya-wrapper *::before, .ya-wrapper *::after { \r\n    margin: 0; padding: 0; box-sizing: border-box; \r\n  }\r\n  \r\n  .ya-wrapper {\r\n    --bg-primary: #08080c; \r\n    --bg-secondary: #0e0e14; \r\n    --bg-card: #14141e; \r\n    --bg-glass: rgba(255, 255, 255, 0.04);\r\n    --border-glass: rgba(255, 255, 255, 0.07); \r\n    --text-primary: #f0f0f5; \r\n    --text-secondary: #9898b0; \r\n    --text-muted: #5c5c72;\r\n    --accent: #6c5ce7; \r\n    --accent-light: #a29bfe; \r\n    --accent-glow: rgba(108, 92, 231, 0.35);\r\n    --gradient-1: linear-gradient(135deg, #6c5ce7, #a29bfe);\r\n    --radius-sm: 10px; \r\n    --radius-md: 16px; \r\n    --radius-lg: 24px; \r\n    --transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);\r\n    \r\n    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n    background-color: var(--bg-primary) !important;\r\n    color: var(--text-primary) !important;\r\n    line-height: 1.7;\r\n    overflow-x: hidden !important;\r\n    overflow-y: visible !important;\r\n    width: 100%;\r\n    display: block;\r\n    position: relative;\r\n  }\r\n\r\n  \/* Force body background for Webflow *\/\r\n  body { background-color: #08080c !important; }\r\n\r\n  .ya-wrapper ::selection { background: var(--accent); color: #fff; }\r\n  .ya-wrapper img { max-width: 100%; display: block; }\r\n  .ya-wrapper a { text-decoration: none; color: inherit; }\r\n  .ya-wrapper ul { list-style: none; }\r\n  .ya-wrapper ::-webkit-scrollbar { width: 6px; }\r\n  .ya-wrapper ::-webkit-scrollbar-track { background: var(--bg-primary); }\r\n  .ya-wrapper ::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; }\r\n\r\n  \/* ===== UTILITY ===== *\/\r\n  .ya-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }\r\n  .ya-section-label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-light); margin-bottom: 16px; }\r\n  .ya-section-label::before { content: ''; display: inline-block; width: 24px; height: 2px; background: var(--accent); border-radius: 2px; }\r\n  .ya-section-title { font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.2; margin-bottom: 20px; letter-spacing: -0.02em; color: var(--text-primary) !important; }\r\n  .ya-section-subtitle { font-size: 1rem; color: var(--text-secondary) !important; max-width: 600px; line-height: 1.8; }\r\n\r\n  \/* ===== NAVIGATION (Sticky for Webflow) ===== *\/\r\n  .ya-nav { position: sticky; top: 0; z-index: 1000; padding: 18px 0; transition: var(--transition); background: transparent; }\r\n  .ya-nav.ya-scrolled { background: rgba(8, 8, 12, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--border-glass); padding: 12px 0; }\r\n  .ya-nav-inner { display: flex; align-items: center; justify-content: space-between; }\r\n  .ya-nav-logo { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n  .ya-nav-links { display: flex; gap: 32px; align-items: center; }\r\n  .ya-nav-links a { font-size: 0.88rem; font-weight: 500; color: var(--text-secondary) !important; transition: var(--transition); position: relative; }\r\n  .ya-nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--gradient-1); transition: var(--transition); border-radius: 2px; }\r\n  .ya-nav-links a:hover { color: var(--text-primary) !important; }\r\n  .ya-nav-links a:hover::after { width: 100%; }\r\n  .ya-nav-cta { padding: 10px 24px; border-radius: 50px; background: var(--gradient-1); font-size: 0.85rem; font-weight: 600; color: #fff !important; transition: var(--transition); box-shadow: 0 4px 20px var(--accent-glow); }\r\n  .ya-nav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 30px var(--accent-glow); }\r\n  .ya-nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }\r\n  .ya-nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: var(--transition); }\r\n\r\n  \/* ===== HERO ===== *\/\r\n  .ya-hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 120px 0 80px; }\r\n  .ya-hero-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(108, 92, 231, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 92, 231, 0.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 100%); }\r\n  .ya-hero-glow { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.35; pointer-events: none; }\r\n  .ya-hero-glow-1 { width: 500px; height: 500px; background: #6c5ce7; top: -10%; right: -5%; animation: yaFloatGlow 8s ease-in-out infinite alternate; }\r\n  .ya-hero-glow-2 { width: 400px; height: 400px; background: #00cec9; bottom: -15%; left: -8%; opacity: 0.2; animation: yaFloatGlow 10s ease-in-out infinite alternate-reverse; }\r\n  @keyframes yaFloatGlow { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(40px, -30px) scale(1.15); } }\r\n  .ya-hero-content { position: relative; z-index: 2; max-width: 780px; }\r\n  .ya-hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 50px; background: var(--bg-glass); border: 1px solid var(--border-glass); font-size: 0.8rem; font-weight: 500; color: var(--text-secondary) !important; margin-bottom: 28px; backdrop-filter: blur(10px); }\r\n  .ya-hero-badge .ya-dot { width: 8px; height: 8px; border-radius: 50%; background: #00cec9; animation: yaPulse 2s ease-in-out infinite; }\r\n  @keyframes yaPulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0, 206, 201, 0.5); } 50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(0, 206, 201, 0); } }\r\n  .ya-hero h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); font-weight: 900; line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 12px; color: var(--text-primary) !important; }\r\n  .ya-hero h1 .ya-highlight { background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n  .ya-hero h1 .ya-outline-text { -webkit-text-stroke: 1.5px var(--text-muted); -webkit-text-fill-color: transparent; }\r\n  .ya-hero-roles { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 28px; }\r\n  .ya-hero-roles span { padding: 6px 16px; border-radius: 50px; background: var(--bg-glass); border: 1px solid var(--border-glass); font-size: 0.82rem; font-weight: 500; color: var(--text-secondary) !important; transition: var(--transition); }\r\n  .ya-hero-roles span:hover { border-color: var(--accent); color: var(--accent-light) !important; background: rgba(108, 92, 231, 0.1); }\r\n  .ya-hero-desc { font-size: 1.05rem; color: var(--text-secondary) !important; line-height: 1.85; max-width: 620px; margin-bottom: 36px; }\r\n  .ya-hero-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }\r\n  .ya-btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: 50px; background: var(--gradient-1); color: #fff !important; font-size: 0.95rem; font-weight: 600; transition: var(--transition); box-shadow: 0 4px 24px var(--accent-glow); border: none; cursor: pointer; }\r\n  .ya-btn-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 40px var(--accent-glow); }\r\n  .ya-btn-secondary { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: 50px; background: transparent; color: var(--text-primary) !important; font-size: 0.95rem; font-weight: 600; border: 1px solid var(--border-glass); transition: var(--transition); cursor: pointer; }\r\n  .ya-btn-secondary:hover { border-color: var(--accent); background: rgba(108, 92, 231, 0.08); transform: translateY(-3px); }\r\n  .ya-hero-stats { display: flex; gap: 48px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--border-glass); }\r\n  .ya-hero-stat h3 { font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n  .ya-hero-stat p { font-size: 0.82rem; color: var(--text-muted) !important; font-weight: 500; margin-top: 2px; }\r\n\r\n  \/* ===== ABOUT ===== *\/\r\n  .ya-about { padding: 120px 0; position: relative; }\r\n  .ya-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\r\n  .ya-about-visual { position: relative; }\r\n  .ya-about-card { background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: var(--radius-lg); padding: 40px; position: relative; overflow: hidden; }\r\n  .ya-about-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient-1); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }\r\n  .ya-about-avatar { width: 100px; height: 100px; border-radius: 50%; background: var(--gradient-1); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 800; color: #fff; margin-bottom: 24px; box-shadow: 0 8px 32px var(--accent-glow); }\r\n  .ya-about-card h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary) !important; }\r\n  .ya-about-card .ya-role { font-size: 0.9rem; color: var(--accent-light) !important; font-weight: 500; margin-bottom: 20px; }\r\n  .ya-about-card p { font-size: 0.92rem; color: var(--text-secondary) !important; line-height: 1.8; }\r\n  .ya-about-stats-row { display: flex; gap: 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border-glass); }\r\n  .ya-about-stat-item h4 { font-size: 1.6rem; font-weight: 800; background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }\r\n  .ya-about-stat-item p { font-size: 0.78rem; color: var(--text-muted) !important; margin-top: 0; }\r\n  .ya-about-text .ya-section-subtitle { margin-bottom: 32px; }\r\n  .ya-about-features { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 32px; }\r\n  .ya-about-feature { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: var(--radius-sm); background: var(--bg-glass); border: 1px solid var(--border-glass); transition: var(--transition); }\r\n  .ya-about-feature:hover { border-color: rgba(108, 92, 231, 0.3); background: rgba(108, 92, 231, 0.06); transform: translateY(-2px); }\r\n  .ya-about-feature-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(108, 92, 231, 0.15); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; }\r\n  .ya-about-feature h4 { font-size: 0.88rem; font-weight: 600; margin-bottom: 2px; color: var(--text-primary) !important; }\r\n  .ya-about-feature p { font-size: 0.78rem; color: var(--text-muted) !important; line-height: 1.5; }\r\n\r\n  \/* ===== SERVICES ===== *\/\r\n  .ya-services { padding: 120px 0; background: var(--bg-secondary); position: relative; }\r\n  .ya-services::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-glass), transparent); }\r\n  .ya-services-header { text-align: center; margin-bottom: 64px; }\r\n  .ya-services-header .ya-section-subtitle { margin: 0 auto; }\r\n  .ya-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }\r\n  .ya-service-card { background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 36px 32px; transition: var(--transition); position: relative; overflow: hidden; }\r\n  .ya-service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--gradient-1); opacity: 0; transition: var(--transition); z-index: 0; }\r\n  .ya-service-card:hover { transform: translateY(-6px); border-color: rgba(108, 92, 231, 0.3); box-shadow: 0 20px 60px rgba(108, 92, 231, 0.15); }\r\n  .ya-service-card:hover::before { opacity: 0.03; }\r\n  .ya-service-card > * { position: relative; z-index: 1; }\r\n  .ya-service-number { font-size: 3rem; font-weight: 900; letter-spacing: -0.04em; background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.4; line-height: 1; margin-bottom: 16px; }\r\n  .ya-service-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; color: var(--text-primary) !important; }\r\n  .ya-service-card p { font-size: 0.9rem; color: var(--text-secondary) !important; line-height: 1.75; }\r\n  .ya-service-tag { display: inline-block; margin-top: 18px; padding: 5px 14px; border-radius: 50px; background: rgba(108, 92, 231, 0.12); border: 1px solid rgba(108, 92, 231, 0.2); font-size: 0.72rem; font-weight: 600; color: var(--accent-light) !important; letter-spacing: 0.04em; }\r\n\r\n  \/* ===== SKILLS ===== *\/\r\n  .ya-skills { padding: 120px 0; }\r\n  .ya-skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }\r\n  .ya-skills-list { display: flex; flex-direction: column; gap: 28px; }\r\n  .ya-skill-item { display: flex; flex-direction: column; gap: 8px; }\r\n  .ya-skill-header { display: flex; justify-content: space-between; align-items: center; }\r\n  .ya-skill-name { font-size: 0.92rem; font-weight: 600; color: var(--text-primary) !important; }\r\n  .ya-skill-percent { font-size: 0.82rem; font-weight: 700; color: var(--accent-light) !important; }\r\n  .ya-skill-bar { width: 100%; height: 8px; background: rgba(255, 255, 255, 0.06); border-radius: 50px; overflow: hidden; }\r\n  .ya-skill-bar-fill { height: 100%; border-radius: 50px; background: var(--gradient-1); width: 0; transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; }\r\n  .ya-skill-bar-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); animation: yaShimmer 2s infinite; }\r\n  @keyframes yaShimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }\r\n  .ya-skills-visual { display: flex; flex-direction: column; gap: 20px; }\r\n  .ya-skill-highlight-card { background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 32px; position: relative; overflow: hidden; transition: var(--transition); }\r\n  .ya-skill-highlight-card:hover { border-color: rgba(108, 92, 231, 0.3); transform: translateX(6px); }\r\n  .ya-skill-highlight-card .ya-icon-wrap { width: 48px; height: 48px; border-radius: 12px; background: rgba(108, 92, 231, 0.12); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 16px; }\r\n  .ya-skill-highlight-card h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: 6px; color: var(--text-primary) !important; }\r\n  .ya-skill-highlight-card p { font-size: 0.85rem; color: var(--text-secondary) !important; line-height: 1.7; }\r\n\r\n  \/* ===== TESTIMONIALS ===== *\/\r\n  .ya-testimonials { padding: 120px 0; background: var(--bg-secondary); position: relative; }\r\n  .ya-testimonials::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-glass), transparent); }\r\n  .ya-testimonials-header { text-align: center; margin-bottom: 64px; }\r\n  .ya-testimonials-header .ya-section-subtitle { margin: 0 auto; }\r\n  .ya-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }\r\n  .ya-testimonial-card { background: var(--bg-card); border: 1px solid var(--border-glass); border-radius: var(--radius-md); padding: 36px 32px; transition: var(--transition); position: relative; overflow: hidden; }\r\n  .ya-testimonial-card::before { content: '\"'; position: absolute; top: 16px; right: 28px; font-size: 5rem; font-weight: 900; line-height: 1; background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; opacity: 0.12; }\r\n  .ya-testimonial-card:hover { transform: translateY(-6px); border-color: rgba(108, 92, 231, 0.25); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }\r\n  .ya-testimonial-stars { display: flex; gap: 3px; margin-bottom: 18px; color: #fdcb6e; font-size: 0.9rem; }\r\n  .ya-testimonial-text { font-size: 0.92rem; color: var(--text-secondary) !important; line-height: 1.85; margin-bottom: 24px; font-style: italic; }\r\n  .ya-testimonial-author { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--border-glass); }\r\n  .ya-testimonial-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--gradient-1); display: flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; color: #fff; flex-shrink: 0; }\r\n  .ya-testimonial-author-info h5 { font-size: 0.9rem; font-weight: 600; color: var(--text-primary) !important; }\r\n  .ya-testimonial-author-info span { font-size: 0.75rem; color: var(--accent-light) !important; font-weight: 500; }\r\n\r\n  \/* ===== CTA ===== *\/\r\n  .ya-cta { padding: 120px 0; position: relative; overflow: hidden; }\r\n  .ya-cta-bg-glow { position: absolute; width: 600px; height: 600px; border-radius: 50%; background: var(--accent); filter: blur(180px); opacity: 0.15; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }\r\n  .ya-cta-inner { position: relative; z-index: 2; text-align: center; max-width: 680px; margin: 0 auto; }\r\n  .ya-cta-inner .ya-section-title { font-size: clamp(2rem, 5vw, 3.2rem); }\r\n  .ya-cta-inner .ya-section-subtitle { margin: 0 auto 40px; }\r\n  .ya-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }\r\n  .ya-btn-whatsapp { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: 50px; background: linear-gradient(135deg, #25d366, #128c7e); color: #fff !important; font-size: 0.95rem; font-weight: 600; transition: var(--transition); box-shadow: 0 4px 24px rgba(37, 211, 102, 0.3); border: none; cursor: pointer; }\r\n  .ya-btn-whatsapp:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(37, 211, 102, 0.45); }\r\n\r\n  \/* ===== FOOTER ===== *\/\r\n  .ya-footer { padding: 40px 0; border-top: 1px solid var(--border-glass); }\r\n  .ya-footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }\r\n  .ya-footer-inner p { font-size: 0.82rem; color: var(--text-muted) !important; }\r\n  .ya-footer-links { display: flex; gap: 24px; }\r\n  .ya-footer-links a { font-size: 0.82rem; color: var(--text-muted) !important; transition: var(--transition); }\r\n  .ya-footer-links a:hover { color: var(--accent-light) !important; }\r\n\r\n  \/* ===== ANIMATIONS ===== *\/\r\n  .ya-reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }\r\n  .ya-reveal.ya-visible { opacity: 1; transform: translateY(0); }\r\n  .ya-reveal-delay-1 { transition-delay: 0.1s; }\r\n  .ya-reveal-delay-2 { transition-delay: 0.2s; }\r\n  .ya-reveal-delay-3 { transition-delay: 0.3s; }\r\n  .ya-reveal-delay-4 { transition-delay: 0.4s; }\r\n\r\n  \/* ===== RESPONSIVE ===== *\/\r\n  @media (max-width: 1024px) {\r\n    .ya-about-grid, .ya-skills-grid { grid-template-columns: 1fr; gap: 48px; }\r\n    .ya-testimonials-grid { grid-template-columns: 1fr 1fr; }\r\n    .ya-testimonials-grid .ya-testimonial-card:last-child { grid-column: span 2; }\r\n  }\r\n  @media (max-width: 768px) {\r\n    .ya-nav-links { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(8, 8, 12, 0.97); backdrop-filter: blur(20px); flex-direction: column; justify-content: center; align-items: center; gap: 32px; z-index: 999; }\r\n    .ya-nav-links.ya-open { display: flex; }\r\n    .ya-nav-links a { font-size: 1.2rem; }\r\n    .ya-nav-toggle { display: flex; z-index: 1001; }\r\n    .ya-nav-toggle.ya-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }\r\n    .ya-nav-toggle.ya-active span:nth-child(2) { opacity: 0; }\r\n    .ya-nav-toggle.ya-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }\r\n    .ya-hero-stats { gap: 28px; flex-wrap: wrap; }\r\n    .ya-services-grid { grid-template-columns: 1fr; }\r\n    .ya-testimonials-grid { grid-template-columns: 1fr; }\r\n    .ya-testimonials-grid .ya-testimonial-card:last-child { grid-column: span 1; }\r\n    .ya-about-features { grid-template-columns: 1fr; }\r\n    .ya-footer-inner { flex-direction: column; text-align: center; }\r\n    .ya-about-stats-row { gap: 20px; }\r\n  }\r\n  @media (max-width: 480px) {\r\n    .ya-hero { padding: 100px 0 60px; }\r\n    .ya-hero-actions { flex-direction: column; width: 100%; }\r\n    .ya-btn-primary, .ya-btn-secondary, .ya-btn-whatsapp { width: 100%; justify-content: center; }\r\n    .ya-hero-stats { gap: 20px; }\r\n    .ya-hero-stat h3 { font-size: 1.5rem; }\r\n  }\r\n<\/style>\r\n\r\n<div class=\"ya-wrapper\">\r\n  <!-- ===== NAVIGATION ===== -->\r\n  <nav class=\"ya-nav\" id=\"yaNav\">\r\n    <div class=\"ya-container ya-nav-inner\">\r\n      <a href=\"#\" class=\"ya-nav-logo\">YASIN.<\/a>\r\n      <div class=\"ya-nav-links\" id=\"yaNavLinks\">\r\n        <a href=\"#ya-about\">About<\/a>\r\n        <a href=\"#ya-services\">Services<\/a>\r\n        <a href=\"#ya-skills\">Skills<\/a>\r\n        <a href=\"#ya-testimonials\">Testimonials<\/a>\r\n        <a href=\"#ya-contact\" class=\"ya-nav-cta\">Let's Talk<\/a>\r\n      <\/div>\r\n      <button class=\"ya-nav-toggle\" id=\"yaNavToggle\" aria-label=\"Toggle navigation\">\r\n        <span><\/span><span><\/span><span><\/span>\r\n      <\/button>\r\n    <\/div>\r\n  <\/nav>\r\n\r\n  <!-- ===== HERO ===== -->\r\n  <section class=\"ya-hero\" id=\"ya-hero\">\r\n    <div class=\"ya-hero-bg-grid\"><\/div>\r\n    <div class=\"ya-hero-glow ya-hero-glow-1\"><\/div>\r\n    <div class=\"ya-hero-glow ya-hero-glow-2\"><\/div>\r\n    <div class=\"ya-container ya-hero-content\">\r\n      <div class=\"ya-hero-badge ya-reveal\"><span class=\"ya-dot\"><\/span> Available for new projects<\/div>\r\n      <h1 class=\"ya-reveal ya-reveal-delay-1\">\r\n        Hi There,<br \/> I'm <span class=\"ya-highlight\">Yasin Arafat<\/span><br \/>\r\n        <span class=\"ya-outline-text\">Web & Landing Page<\/span><br \/> Designer.\r\n      <\/h1>\r\n      <div class=\"ya-hero-roles ya-reveal ya-reveal-delay-2\">\r\n        <span>Website Design<\/span><span>Landing Page<\/span><span>CRO & Sales<\/span>\r\n      <\/div>\r\n      <p class=\"ya-hero-desc ya-reveal ya-reveal-delay-2\">\r\n        \u0986\u09ae\u09bf \u0987\u09af\u09bc\u09be\u09b8\u09bf\u09a8 \u0986\u09b0\u09be\u09ab\u09be\u09a4, \u098f\u0995\u099c\u09a8 WordPress Website Designer \u0993 Landing Page Specialist\u0964 \u0986\u09ae\u09bf \u09ac\u09cd\u09af\u09ac\u09b8\u09be\u09b0 \u099c\u09a8\u09cd\u09af \u098f\u09ae\u09a8 \u0993\u09af\u09bc\u09c7\u09ac\u09b8\u09be\u0987\u099f \u09a4\u09c8\u09b0\u09bf \u0995\u09b0\u09bf \u09af\u09be \u09ac\u09bf\u09b6\u09cd\u09ac\u09be\u09b8\u09af\u09cb\u0997\u09cd\u09af\u09a4\u09be \u09ac\u09c3\u09a6\u09cd\u09a7\u09bf \u0995\u09b0\u09c7, \u09ad\u09bf\u099c\u09bf\u099f\u09b0\u09a6\u09c7\u09b0 \u0986\u0995\u09c3\u09b7\u09cd\u099f \u0995\u09b0\u09c7 \u098f\u09ac\u0982 \u09a4\u09be\u09a6\u09c7\u09b0\u0995\u09c7 \u0997\u09cd\u09b0\u09be\u09b9\u0995\u09c7 \u09b0\u09c2\u09aa\u09be\u09a8\u09cd\u09a4\u09b0 \u0995\u09b0\u09a4\u09c7 \u09b8\u09be\u09b9\u09be\u09af\u09cd\u09af \u0995\u09b0\u09c7\u0964\r\n      <\/p>\r\n      <div class=\"ya-hero-actions ya-reveal ya-reveal-delay-3\">\r\n        <a href=\"#ya-contact\" class=\"ya-btn-primary\">Start a Project <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/><\/svg><\/a>\r\n        <a href=\"#ya-services\" class=\"ya-btn-secondary\">View Services<\/a>\r\n      <\/div>\r\n      <div class=\"ya-hero-stats ya-reveal ya-reveal-delay-4\">\r\n        <div class=\"ya-hero-stat\"><h3>150+<\/h3><p>Projects Completed<\/p><\/div>\r\n        <div class=\"ya-hero-stat\"><h3>180+<\/h3><p>Satisfied Clients<\/p><\/div>\r\n        <div class=\"ya-hero-stat\"><h3>3+<\/h3><p>Years of Expertise<\/p><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ===== ABOUT ===== -->\r\n  <section class=\"ya-about\" id=\"ya-about\">\r\n    <div class=\"ya-container\">\r\n      <div class=\"ya-about-grid\">\r\n        <div class=\"ya-about-visual ya-reveal\">\r\n          <div class=\"ya-about-card\">\r\n            <div class=\"ya-about-avatar\">YA<\/div>\r\n            <h3>Yasin Arafat<\/h3>\r\n            <p class=\"ya-role\">WordPress Designer & Landing Page Specialist<\/p>\r\n            <p>\u0986\u09aa\u09a8\u09be\u09b0 \u09ac\u09cd\u09af\u09ac\u09b8\u09be\u09b0 \u099c\u09a8\u09cd\u09af \u09aa\u09cd\u09b0\u09ab\u09c7\u09b6\u09a8\u09be\u09b2 WordPress Website \u0985\u09a5\u09ac\u09be High-Converting Landing Page \u09aa\u09cd\u09b0\u09af\u09bc\u09cb\u099c\u09a8? \u0986\u09ae\u09bf \u098f\u09ae\u09a8 \u0993\u09af\u09bc\u09c7\u09ac\u09b8\u09be\u0987\u099f \u09a4\u09c8\u09b0\u09bf \u0995\u09b0\u09bf \u09af\u09be \u09ac\u09cd\u09b0\u09cd\u09af\u09be\u09a8\u09cd\u09a1\u09c7\u09b0 \u09ac\u09bf\u09b6\u09cd\u09ac\u09be\u09b8\u09af\u09cb\u0997\u09cd\u09af\u09a4\u09be \u09ac\u09be\u09a1\u09bc\u09be\u09af\u09bc, \u09ac\u09cd\u09af\u09ac\u09b9\u09be\u09b0\u0995\u09be\u09b0\u09c0\u09a6\u09c7\u09b0 \u0986\u0995\u09c3\u09b7\u09cd\u099f \u0995\u09b0\u09c7 \u098f\u09ac\u0982 \u09ac\u09bf\u0995\u09cd\u09b0\u09af\u09bc \u09ac\u09c3\u09a6\u09cd\u09a7\u09bf\u09a4\u09c7 \u09b8\u09b9\u09be\u09af\u09bc\u09a4\u09be \u0995\u09b0\u09c7\u0964<\/p>\r\n            <div class=\"ya-about-stats-row\">\r\n              <div class=\"ya-about-stat-item\"><h4>3+<\/h4><p>Years Expertise<\/p><\/div>\r\n              <div class=\"ya-about-stat-item\"><h4>150+<\/h4><p>Projects Done<\/p><\/div>\r\n              <div class=\"ya-about-stat-item\"><h4>180+<\/h4><p>Happy Clients<\/p><\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"ya-about-text ya-reveal ya-reveal-delay-1\">\r\n          <span class=\"ya-section-label\">About Me<\/span>\r\n          <h2 class=\"ya-section-title\">Get to Know the Designer Behind the Brand<\/h2>\r\n          <p class=\"ya-section-subtitle\">\u0986\u09a7\u09c1\u09a8\u09bf\u0995 \u09a1\u09bf\u099c\u09be\u0987\u09a8, \u09a6\u09cd\u09b0\u09c1\u09a4 \u09aa\u09be\u09b0\u09ab\u09b0\u09ae\u09cd\u09af\u09be\u09a8\u09cd\u09b8 \u098f\u09ac\u0982 Conversion-Driven Strategy \u09a6\u09bf\u09af\u09bc\u09c7 \u0986\u09aa\u09a8\u09be\u09b0 \u0985\u09a8\u09b2\u09be\u0987\u09a8 \u0989\u09aa\u09b8\u09cd\u09a5\u09bf\u09a4\u09bf\u0995\u09c7 \u09a8\u09a4\u09c1\u09a8 \u0989\u099a\u09cd\u099a\u09a4\u09be\u09af\u09bc \u09a8\u09bf\u09af\u09bc\u09c7 \u09af\u09c7\u09a4\u09c7 \u09b8\u09be\u09b9\u09be\u09af\u09cd\u09af \u0995\u09b0\u09bf\u0964<\/p>\r\n          <div class=\"ya-about-features\">\r\n            <div class=\"ya-about-feature\"><div class=\"ya-about-feature-icon\">\ud83c\udf10<\/div><div><h4>Website Design<\/h4><p>Fast, modern WordPress websites built to earn visitor trust.<\/p><\/div><\/div>\r\n            <div class=\"ya-about-feature\"><div class=\"ya-about-feature-icon\">\ud83c\udfaf<\/div><div><h4>Landing Pages<\/h4><p>CRO-friendly pages designed purely to grow your sales.<\/p><\/div><\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ===== SERVICES ===== -->\r\n  <section class=\"ya-services\" id=\"ya-services\">\r\n    <div class=\"ya-container\">\r\n      <div class=\"ya-services-header ya-reveal\">\r\n        <span class=\"ya-section-label\">My Service<\/span>\r\n        <h2 class=\"ya-section-title\">Services Built to Grow Your Sales<\/h2>\r\n        <p class=\"ya-section-subtitle\">From full business websites to high-converting landing pages \u2014 everything you need to turn visitors into customers.<\/p>\r\n      <\/div>\r\n      <div class=\"ya-services-grid\">\r\n        <div class=\"ya-service-card ya-reveal\"><div class=\"ya-service-number\">01<\/div><h3>Advanced WordPress Website<\/h3><p>Full business websites that build credibility and grow sales \u2014 3\u20135 days delivery.<\/p><span class=\"ya-service-tag\">3\u20135 Days Delivery<\/span><\/div>\r\n        <div class=\"ya-service-card ya-reveal ya-reveal-delay-1\"><div class=\"ya-service-number\">02<\/div><h3>High-Converting Landing Page<\/h3><p>CRO-friendly landing pages built to sell \u2014 delivered in just 4\u20135 hours.<\/p><span class=\"ya-service-tag\">4\u20135 Hours Delivery<\/span><\/div>\r\n        <div class=\"ya-service-card ya-reveal ya-reveal-delay-2\"><div class=\"ya-service-number\">03<\/div><h3>WooCommerce Store Setup<\/h3><p>Complete online stores with smooth checkout and product management.<\/p><span class=\"ya-service-tag\">E-commerce Ready<\/span><\/div>\r\n        <div class=\"ya-service-card ya-reveal ya-reveal-delay-3\"><div class=\"ya-service-number\">04<\/div><h3>Meta & Instagram Ads<\/h3><p>Campaign setup and optimisation that turns traffic into customers.<\/p><span class=\"ya-service-tag\">Paid Traffic<\/span><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ===== SKILLS ===== -->\r\n  <section class=\"ya-skills\" id=\"ya-skills\">\r\n    <div class=\"ya-container\">\r\n      <div class=\"ya-skills-grid\">\r\n        <div class=\"ya-skills-text ya-reveal\">\r\n          <span class=\"ya-section-label\">My Skills<\/span>\r\n          <h2 class=\"ya-section-title\">Tools I Design & Sell With<\/h2>\r\n          <p class=\"ya-section-subtitle\" style=\"margin-bottom: 40px;\">A carefully curated toolkit refined over 3+ years of building high-performance websites and conversion-focused landing pages.<\/p>\r\n          <div class=\"ya-skills-list\">\r\n            <div class=\"ya-skill-item\"><div class=\"ya-skill-header\"><span class=\"ya-skill-name\">WordPress<\/span><span class=\"ya-skill-percent\">95%<\/span><\/div><div class=\"ya-skill-bar\"><div class=\"ya-skill-bar-fill\" data-width=\"95%\"><\/div><\/div><\/div>\r\n            <div class=\"ya-skill-item\"><div class=\"ya-skill-header\"><span class=\"ya-skill-name\">Elementor<\/span><span class=\"ya-skill-percent\">98%<\/span><\/div><div class=\"ya-skill-bar\"><div class=\"ya-skill-bar-fill\" data-width=\"98%\"><\/div><\/div><\/div>\r\n            <div class=\"ya-skill-item\"><div class=\"ya-skill-header\"><span class=\"ya-skill-name\">WooCommerce<\/span><span class=\"ya-skill-percent\">90%<\/span><\/div><div class=\"ya-skill-bar\"><div class=\"ya-skill-bar-fill\" data-width=\"90%\"><\/div><\/div><\/div>\r\n            <div class=\"ya-skill-item\"><div class=\"ya-skill-header\"><span class=\"ya-skill-name\">Meta Ads<\/span><span class=\"ya-skill-percent\">85%<\/span><\/div><div class=\"ya-skill-bar\"><div class=\"ya-skill-bar-fill\" data-width=\"85%\"><\/div><\/div><\/div>\r\n            <div class=\"ya-skill-item\"><div class=\"ya-skill-header\"><span class=\"ya-skill-name\">Instagram Ads<\/span><span class=\"ya-skill-percent\">88%<\/span><\/div><div class=\"ya-skill-bar\"><div class=\"ya-skill-bar-fill\" data-width=\"88%\"><\/div><\/div><\/div>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"ya-skills-visual ya-reveal ya-reveal-delay-1\">\r\n          <div class=\"ya-skill-highlight-card\"><div class=\"ya-icon-wrap\">\u26a1<\/div><h4>Fast Delivery<\/h4><p>Landing pages delivered in 4\u20135 hours. Full websites in 3\u20135 days \u2014 without compromising quality.<\/p><\/div>\r\n          <div class=\"ya-skill-highlight-card\"><div class=\"ya-icon-wrap\">\ud83d\udcc8<\/div><h4>Conversion-Focused<\/h4><p>Every pixel is designed with one goal: turning your visitors into paying customers.<\/p><\/div>\r\n          <div class=\"ya-skill-highlight-card\"><div class=\"ya-icon-wrap\">\ud83d\udd27<\/div><h4>Modern Tech Stack<\/h4><p>Built on WordPress, Elementor, WooCommerce, and Meta Ads \u2014 industry-standard tools that scale.<\/p><\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ===== TESTIMONIALS ===== -->\r\n  <section class=\"ya-testimonials\" id=\"ya-testimonials\">\r\n    <div class=\"ya-container\">\r\n      <div class=\"ya-testimonials-header ya-reveal\">\r\n        <span class=\"ya-section-label\">Client Testimonials<\/span>\r\n        <h2 class=\"ya-section-title\">What Clients Say About Me<\/h2>\r\n        <p class=\"ya-section-subtitle\">Real feedback from real business owners who trusted me with their online presence.<\/p>\r\n      <\/div>\r\n      <div class=\"ya-testimonials-grid\">\r\n        <div class=\"ya-testimonial-card ya-reveal\"><div class=\"ya-testimonial-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><p class=\"ya-testimonial-text\">\u0987\u09af\u09bc\u09be\u099b\u09bf\u09a8\u09c7\u09b0 \u09ae\u09be\u09a7\u09cd\u09af\u09ae\u09c7 \u09a4\u09c8\u09b0\u09bf \u0993\u09af\u09bc\u09c7\u09ac\u09b8\u09be\u0987\u099f\u09c7\u09b0 \u0985\u09ad\u09bf\u099c\u09cd\u099e\u09a4\u09be \u0996\u09c1\u09ac\u0987 \u09ad\u09be\u09b2\u09cb \u099b\u09bf\u09b2\u0964 \u09a1\u09bf\u099c\u09be\u0987\u09a8\u099f\u09bf \u0986\u09a7\u09c1\u09a8\u09bf\u0995 \u0993 \u09aa\u09cd\u09b0\u09ab\u09c7\u09b6\u09a8\u09be\u09b2, \u0986\u09b0 \u09b8\u09ac\u0995\u09bf\u099b\u09c1\u0987 \u0996\u09c1\u09ac \u09b8\u09cd\u09ae\u09c1\u09a5\u09ad\u09be\u09ac\u09c7 \u0995\u09be\u099c \u0995\u09b0\u09c7\u0964 \u0986\u09ae\u09bf \u09b8\u09a4\u09cd\u09af\u09bf\u0987 \u09b8\u09a8\u09cd\u09a4\u09c1\u09b7\u09cd\u099f\u0964<\/p><div class=\"ya-testimonial-author\"><div class=\"ya-testimonial-avatar\">AK<\/div><div class=\"ya-testimonial-author-info\"><h5>Abdul Karim<\/h5><span>Verified Client<\/span><\/div><\/div><\/div>\r\n        <div class=\"ya-testimonial-card ya-reveal ya-reveal-delay-1\"><div class=\"ya-testimonial-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><p class=\"ya-testimonial-text\">\u0993\u09af\u09bc\u09c7\u09ac\u09b8\u09be\u0987\u099f\u099f\u09bf \u0985\u09b8\u09be\u09a7\u09be\u09b0\u09a3\u09ad\u09be\u09ac\u09c7 \u09a4\u09c8\u09b0\u09bf \u0995\u09b0\u09be \u09b9\u09af\u09bc\u09c7\u099b\u09c7\u0964 \u09b2\u09cb\u09a1\u09bf\u0982 \u09b8\u09cd\u09aa\u09bf\u09a1 \u09ad\u09be\u09b2\u09cb, \u09a1\u09bf\u099c\u09be\u0987\u09a8 \u0995\u09cd\u09b2\u09bf\u09a8 \u098f\u09ac\u0982 \u0987\u0989\u099c\u09be\u09b0 \u098f\u0995\u09cd\u09b8\u09aa\u09c7\u09b0\u09bf\u09af\u09bc\u09c7\u09a8\u09cd\u09b8 \u0996\u09c1\u09ac\u0987 \u09b8\u09c1\u09a8\u09cd\u09a6\u09b0\u0964 \u0995\u09be\u099c \u09b8\u09a4\u09cd\u09af\u09bf\u0987 \u09aa\u09cd\u09b0\u09b6\u0982\u09b8\u09a8\u09c0\u09af\u09bc\u0964<\/p><div class=\"ya-testimonial-author\"><div class=\"ya-testimonial-avatar\">R<\/div><div class=\"ya-testimonial-author-info\"><h5>Rabeya<\/h5><span>Verified Client<\/span><\/div><\/div><\/div>\r\n        <div class=\"ya-testimonial-card ya-reveal ya-reveal-delay-2\"><div class=\"ya-testimonial-stars\">\u2605\u2605\u2605\u2605\u2605<\/div><p class=\"ya-testimonial-text\">\u098f\u0987 \u0993\u09af\u09bc\u09c7\u09ac\u09b8\u09be\u0987\u099f\u099f\u09bf \u0986\u09ae\u09be\u09b0 \u09aa\u09cd\u09b0\u09a4\u09cd\u09af\u09be\u09b6\u09be\u09b0 \u099a\u09c7\u09af\u09bc\u09c7\u0993 \u09ad\u09be\u09b2\u09cb \u09b9\u09af\u09bc\u09c7\u099b\u09c7\u0964 \u09b8\u09ac\u0995\u09bf\u099b\u09c1 \u09b8\u09ae\u09af\u09bc\u09ae\u09a4\u09cb \u09a1\u09c7\u09b2\u09bf\u09ad\u09be\u09b0\u09bf \u09aa\u09c7\u09af\u09bc\u09c7\u099b\u09bf \u098f\u09ac\u0982 \u09b8\u09be\u09aa\u09cb\u09b0\u09cd\u099f\u0993 \u099b\u09bf\u09b2 \u09a6\u09be\u09b0\u09c1\u09a3\u0964 \u0986\u09ae\u09bf \u0985\u09ac\u09b6\u09cd\u09af\u0987 \u09b0\u09c7\u0995\u09ae\u09c7\u09a8\u09cd\u09a1 \u0995\u09b0\u09ac\u09cb\u0964<\/p><div class=\"ya-testimonial-author\"><div class=\"ya-testimonial-avatar\">MA<\/div><div class=\"ya-testimonial-author-info\"><h5>\u09ae\u09cb\u09b9\u09be\u09ae\u09cd\u09ae\u09a6 \u0986\u09b0\u09bf\u09ab<\/h5><span>Verified Client<\/span><\/div><\/div><\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ===== CTA ===== -->\r\n  <section class=\"ya-cta\" id=\"ya-contact\">\r\n    <div class=\"ya-cta-bg-glow\"><\/div>\r\n    <div class=\"ya-container\">\r\n      <div class=\"ya-cta-inner ya-reveal\">\r\n        <span class=\"ya-section-label\" style=\"justify-content: center;\">Let's Build Something<\/span>\r\n        <h2 class=\"ya-section-title\">That Sells.<\/h2>\r\n        <p class=\"ya-section-subtitle\">\u0986\u09aa\u09a8\u09be\u09b0 \u09aa\u09b0\u09ac\u09b0\u09cd\u09a4\u09c0 \u0993\u09af\u09bc\u09c7\u09ac\u09b8\u09be\u0987\u099f \u0985\u09a5\u09ac\u09be \u09b2\u09cd\u09af\u09be\u09a8\u09cd\u09a1\u09bf\u0982 \u09aa\u09c7\u099c \u09aa\u09cd\u09b0\u099c\u09c7\u0995\u09cd\u099f \u09a8\u09bf\u09af\u09bc\u09c7 \u0995\u09a5\u09be \u09ac\u09b2\u09a4\u09c7 \u099a\u09be\u09a8? WhatsApp-\u098f \u09ae\u09c7\u09b8\u09c7\u099c \u0995\u09b0\u09c1\u09a8, \u098f\u0995\u09b8\u09be\u09a5\u09c7 \u09b6\u09c1\u09b0\u09c1 \u0995\u09b0\u09bf\u0964<\/p>\r\n        <div class=\"ya-cta-actions\">\r\n          <a href=\"https:\/\/wa.me\/8801835850254\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"ya-btn-whatsapp\">\r\n            <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z\"\/><\/svg>\r\n            Message on WhatsApp\r\n          <\/a>\r\n          <a href=\"mailto:hello@yasinarafat.com\" class=\"ya-btn-secondary\">Send an Email<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <!-- ===== FOOTER ===== -->\r\n  <footer class=\"ya-footer\">\r\n    <div class=\"ya-container ya-footer-inner\">\r\n      <p>&copy; 2026 Yasin Arafat. All rights reserved.<\/p>\r\n      <div class=\"ya-footer-links\">\r\n        <a href=\"#ya-about\">About<\/a><a href=\"#ya-services\">Services<\/a><a href=\"#ya-skills\">Skills<\/a><a href=\"#ya-contact\">Contact<\/a>\r\n      <\/div>\r\n    <\/div>\r\n  <\/footer>\r\n<\/div>\r\n\r\n<script>\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n    \/\/ Force body background\r\n    document.body.style.backgroundColor = '#08080c';\r\n    \r\n    \/\/ Navigation Scroll\r\n    const nav = document.getElementById('yaNav');\r\n    if (nav) {\r\n      window.addEventListener('scroll', () => {\r\n        nav.classList.toggle('ya-scrolled', window.scrollY > 50);\r\n      });\r\n    }\r\n\r\n    \/\/ Mobile Menu\r\n    const navToggle = document.getElementById('yaNavToggle');\r\n    const navLinks = document.getElementById('yaNavLinks');\r\n    if (navToggle && navLinks) {\r\n      navToggle.addEventListener('click', () => {\r\n        navToggle.classList.toggle('ya-active');\r\n        navLinks.classList.toggle('ya-open');\r\n      });\r\n      navLinks.querySelectorAll('a').forEach(link => {\r\n        link.addEventListener('click', () => {\r\n          navToggle.classList.remove('ya-active');\r\n          navLinks.classList.remove('ya-open');\r\n        });\r\n      });\r\n    }\r\n\r\n    \/\/ Scroll Reveal\r\n    const revealElements = document.querySelectorAll('.ya-reveal');\r\n    const revealObserver = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          entry.target.classList.add('ya-visible');\r\n          revealObserver.unobserve(entry.target);\r\n        }\r\n      });\r\n    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\r\n    revealElements.forEach(el => revealObserver.observe(el));\r\n\r\n    \/\/ Skill Bars\r\n    const skillBars = document.querySelectorAll('.ya-skill-bar-fill');\r\n    const skillObserver = new IntersectionObserver((entries) => {\r\n      entries.forEach(entry => {\r\n        if (entry.isIntersecting) {\r\n          const bar = entry.target;\r\n          const width = bar.getAttribute('data-width');\r\n          setTimeout(() => { bar.style.width = width; }, 200);\r\n          skillObserver.unobserve(bar);\r\n        }\r\n      });\r\n    }, { threshold: 0.3 });\r\n    skillBars.forEach(bar => skillObserver.observe(bar));\r\n\r\n    \/\/ Smooth Scroll\r\n    document.querySelectorAll('.ya-wrapper a[href^=\"#\"]').forEach(anchor => {\r\n      anchor.addEventListener('click', function (e) {\r\n        e.preventDefault();\r\n        const target = document.querySelector(this.getAttribute('href'));\r\n        if (target) {\r\n          const offsetTop = target.offsetTop - 80;\r\n          window.scrollTo({ top: offsetTop, behavior: 'smooth' });\r\n        }\r\n      });\r\n    });\r\n  });\r\n<\/script>\r\n<!-- ================= END: YASIN ARAFAT PORTFOLIO ================= -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>YASIN. About Services Skills Testimonials Let&#8217;s Talk Available for new projects Hi There, I&#8217;m Yasin Arafat Web &#038; Landing Page [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","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":"","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-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/web.yasinarafat.me\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.yasinarafat.me\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web.yasinarafat.me\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web.yasinarafat.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web.yasinarafat.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":5,"href":"https:\/\/web.yasinarafat.me\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/web.yasinarafat.me\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/web.yasinarafat.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}