{"id":7,"date":"2026-05-15T19:55:16","date_gmt":"2026-05-15T19:55:16","guid":{"rendered":"https:\/\/crewmasolution.com\/?page_id=7"},"modified":"2026-05-15T20:40:04","modified_gmt":"2026-05-15T20:40:04","slug":"elementor-7","status":"publish","type":"page","link":"https:\/\/crewmasolution.com\/","title":{"rendered":"Elementor #7"},"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-480c043 e-flex e-con-boxed e-con e-parent\" data-id=\"480c043\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7cd9098 elementor-widget elementor-widget-html\" data-id=\"7cd9098\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================\n     MOAZ GAD \u2014 PORTFOLIO (Elementor HTML Widget)\n     Paste this entire block into an Elementor HTML widget.\n     All styles are scoped under .mg-pf to prevent conflicts.\n     ============================================ -->\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n  \/* ===== Reset + scope ===== *\/\n  .mg-pf, .mg-pf *, .mg-pf *::before, .mg-pf *::after { box-sizing: border-box; }\n  .mg-pf {\n    --mg-black: #0a0a0a;\n    --mg-black-2: #111111;\n    --mg-black-3: #1a1a1a;\n    --mg-gray: #2a2a2a;\n    --mg-gray-2: #3a3a3a;\n    --mg-text: #ededed;\n    --mg-text-dim: #a0a0a0;\n    --mg-text-mute: #707070;\n    --mg-yellow: #ffd60a;\n    --mg-yellow-2: #ffc300;\n    --mg-yellow-glow: rgba(255, 214, 10, 0.5);\n    --mg-gradient: linear-gradient(135deg, #ffd60a 0%, #ffc300 50%, #ff9500 100%);\n    --mg-gradient-soft: linear-gradient(135deg, rgba(255, 214, 10, 0.15), rgba(255, 195, 0, 0.05));\n    --mg-gradient-text: linear-gradient(135deg, #ffd60a 0%, #ffeb70 50%, #ffc300 100%);\n    --mg-radius: 16px;\n    --mg-radius-sm: 10px;\n    --mg-radius-lg: 24px;\n    --mg-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n\n    position: relative;\n    font-family: 'Inter', system-ui, -apple-system, sans-serif;\n    background: var(--mg-black);\n    color: var(--mg-text);\n    line-height: 1.6;\n    overflow: hidden;\n    border-radius: var(--mg-radius-lg);\n  }\n  .mg-pf h1, .mg-pf h2, .mg-pf h3, .mg-pf h4, .mg-pf p { margin: 0; padding: 0; }\n  .mg-pf ul { list-style: none; margin: 0; padding: 0; }\n  .mg-pf a { color: inherit; text-decoration: none; }\n  .mg-pf img { max-width: 100%; display: block; }\n\n  \/* ===== Backgrounds ===== *\/\n  .mg-pf .mg-bg-glow {\n    position: absolute;\n    top: -20%; left: -10%;\n    width: 60%; height: 60%;\n    background: radial-gradient(circle, rgba(255, 214, 10, 0.15) 0%, transparent 70%);\n    filter: blur(60px);\n    pointer-events: none;\n    z-index: 0;\n    animation: mg-float 12s ease-in-out infinite;\n  }\n  .mg-pf .mg-bg-glow::after {\n    content: '';\n    position: absolute;\n    bottom: -100%; right: -50%;\n    width: 90%; height: 90%;\n    background: radial-gradient(circle, rgba(255, 149, 0, 0.1) 0%, transparent 70%);\n    filter: blur(60px);\n    animation: mg-float 15s ease-in-out infinite reverse;\n  }\n  .mg-pf .mg-bg-grid {\n    position: absolute;\n    inset: 0;\n    background-image:\n      linear-gradient(rgba(255, 214, 10, 0.03) 1px, transparent 1px),\n      linear-gradient(90deg, rgba(255, 214, 10, 0.03) 1px, transparent 1px);\n    background-size: 50px 50px;\n    pointer-events: none;\n    z-index: 0;\n  }\n  @keyframes mg-float {\n    0%, 100% { transform: translate(0, 0); }\n    50% { transform: translate(40px, -30px); }\n  }\n\n  \/* ===== Nav (scoped, not fixed) ===== *\/\n  .mg-pf .mg-nav {\n    position: relative;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 6%;\n    backdrop-filter: blur(20px);\n    background: rgba(10, 10, 10, 0.7);\n    border-bottom: 1px solid rgba(255, 214, 10, 0.08);\n  }\n  .mg-pf .mg-brand {\n    font-weight: 800;\n    font-size: 1.4rem;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    letter-spacing: -0.02em;\n    color: var(--mg-text);\n  }\n  .mg-pf .mg-brand-dot {\n    width: 10px; height: 10px;\n    border-radius: 50%;\n    background: var(--mg-gradient);\n    box-shadow: 0 0 12px var(--mg-yellow-glow);\n  }\n  .mg-pf .mg-brand-accent { color: var(--mg-yellow); }\n  .mg-pf .mg-nav-links { display: flex; gap: 36px; }\n  .mg-pf .mg-nav-links a {\n    font-size: 0.95rem;\n    color: var(--mg-text-dim);\n    font-weight: 500;\n    transition: color var(--mg-transition);\n    position: relative;\n  }\n  .mg-pf .mg-nav-links a:hover { color: var(--mg-yellow); }\n  .mg-pf .mg-nav-cta {\n    padding: 10px 20px;\n    background: var(--mg-gradient);\n    color: var(--mg-black);\n    font-weight: 700;\n    font-size: 0.9rem;\n    border-radius: var(--mg-radius-sm);\n    transition: all var(--mg-transition);\n  }\n  .mg-pf .mg-nav-cta:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 30px rgba(255, 214, 10, 0.4);\n  }\n\n  \/* ===== Hero ===== *\/\n  .mg-pf .mg-hero {\n    position: relative;\n    z-index: 1;\n    padding: 80px 6%;\n    display: grid;\n    grid-template-columns: 1.3fr 1fr;\n    align-items: center;\n    gap: 80px;\n  }\n  .mg-pf .mg-hero-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 16px;\n    background: rgba(255, 214, 10, 0.08);\n    border: 1px solid rgba(255, 214, 10, 0.2);\n    border-radius: 100px;\n    font-size: 0.85rem;\n    font-weight: 500;\n    color: var(--mg-yellow);\n    margin-bottom: 28px;\n  }\n  .mg-pf .mg-dot-pulse {\n    width: 8px; height: 8px;\n    border-radius: 50%;\n    background: var(--mg-yellow);\n    box-shadow: 0 0 10px var(--mg-yellow);\n    animation: mg-pulse 2s ease-in-out infinite;\n  }\n  @keyframes mg-pulse {\n    0%, 100% { opacity: 1; transform: scale(1); }\n    50% { opacity: 0.5; transform: scale(0.85); }\n  }\n  .mg-pf .mg-hero-title {\n    font-size: clamp(2rem, 5vw, 4rem);\n    font-weight: 800;\n    line-height: 1.05;\n    letter-spacing: -0.03em;\n    margin-bottom: 24px;\n    color: var(--mg-text);\n  }\n  .mg-pf .mg-grad-text {\n    background: var(--mg-gradient-text);\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n  .mg-pf .mg-hero-sub {\n    font-size: 1.05rem;\n    color: var(--mg-text-dim);\n    max-width: 540px;\n    margin-bottom: 40px;\n    line-height: 1.7;\n  }\n  .mg-pf .mg-hero-cta {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 60px;\n    flex-wrap: wrap;\n  }\n  .mg-pf .mg-btn {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 26px;\n    border-radius: var(--mg-radius-sm);\n    font-weight: 600;\n    font-size: 0.95rem;\n    transition: all var(--mg-transition);\n    cursor: pointer;\n    white-space: nowrap;\n  }\n  .mg-pf .mg-btn-primary {\n    background: var(--mg-gradient);\n    color: var(--mg-black);\n    box-shadow: 0 8px 30px rgba(255, 214, 10, 0.3);\n  }\n  .mg-pf .mg-btn-primary:hover {\n    transform: translateY(-3px);\n    box-shadow: 0 12px 40px rgba(255, 214, 10, 0.5);\n  }\n  .mg-pf .mg-btn-ghost {\n    background: transparent;\n    color: var(--mg-text);\n    border: 1px solid var(--mg-gray-2);\n  }\n  .mg-pf .mg-btn-ghost:hover {\n    border-color: var(--mg-yellow);\n    color: var(--mg-yellow);\n    background: rgba(255, 214, 10, 0.05);\n  }\n  .mg-pf .mg-btn-lg { padding: 18px 32px; font-size: 1rem; }\n  .mg-pf .mg-stats {\n    display: flex;\n    align-items: center;\n    gap: 28px;\n    flex-wrap: wrap;\n  }\n  .mg-pf .mg-stat strong {\n    display: block;\n    font-size: 1.8rem;\n    font-weight: 800;\n    background: var(--mg-gradient-text);\n    -webkit-background-clip: text;\n    background-clip: text;\n    -webkit-text-fill-color: transparent;\n  }\n  .mg-pf .mg-stat span {\n    font-size: 0.8rem;\n    color: var(--mg-text-mute);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n  }\n  .mg-pf .mg-stat-divider {\n    width: 1px;\n    height: 36px;\n    background: var(--mg-gray-2);\n  }\n\n  \/* ===== Hero image ===== *\/\n  .mg-pf .mg-hero-image {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .mg-pf .mg-image-frame {\n    position: relative;\n    width: 340px;\n    height: 420px;\n    border-radius: var(--mg-radius-lg);\n    overflow: hidden;\n    background: linear-gradient(135deg, var(--mg-black-3), var(--mg-black-2));\n    border: 1px solid rgba(255, 214, 10, 0.15);\n    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);\n  }\n  .mg-pf .mg-image-frame::before {\n    content: '';\n    position: absolute;\n    inset: -2px;\n    background: var(--mg-gradient);\n    border-radius: var(--mg-radius-lg);\n    z-index: -1;\n    opacity: 0.6;\n    filter: blur(20px);\n  }\n  .mg-pf .mg-placeholder {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: 16px;\n    color: var(--mg-gray-2);\n    background:\n      radial-gradient(circle at 30% 30%, rgba(255, 214, 10, 0.08), transparent 60%),\n      linear-gradient(135deg, var(--mg-black-3), var(--mg-black-2));\n  }\n  .mg-pf .mg-placeholder img,\n  .mg-pf .mg-image-frame > img { width: 100%; height: 100%; object-fit: cover; display: block; }\n  .mg-pf .mg-ph-svg { width: 140px; height: 140px; color: var(--mg-gray-2); }\n  .mg-pf .mg-ph-label {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 0.7rem;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    color: var(--mg-text-mute);\n    background: rgba(255, 214, 10, 0.05);\n    padding: 6px 14px;\n    border-radius: 100px;\n    border: 1px dashed var(--mg-gray-2);\n  }\n  .mg-pf .mg-floating-badge {\n    position: absolute;\n    padding: 10px 18px;\n    background: rgba(20, 20, 20, 0.9);\n    border: 1px solid rgba(255, 214, 10, 0.25);\n    border-radius: 100px;\n    font-size: 0.8rem;\n    font-weight: 600;\n    backdrop-filter: blur(10px);\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);\n    color: var(--mg-text);\n    animation: mg-float-badge 4s ease-in-out infinite;\n    z-index: 2;\n  }\n  .mg-pf .mg-badge-1 { top: 8%; left: -8%; animation-delay: 0s; }\n  .mg-pf .mg-badge-2 { top: 45%; right: -12%; animation-delay: 1.3s; }\n  .mg-pf .mg-badge-3 { bottom: 12%; left: -4%; animation-delay: 2.6s; }\n  @keyframes mg-float-badge {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-12px); }\n  }\n\n  \/* ===== Section base ===== *\/\n  .mg-pf .mg-section {\n    position: relative;\n    z-index: 1;\n    padding: 80px 6%;\n    max-width: 1400px;\n    margin: 0 auto;\n  }\n  .mg-pf .mg-section-head { margin-bottom: 50px; }\n  .mg-pf .mg-section-num {\n    font-family: 'JetBrains Mono', monospace;\n    font-size: 0.8rem;\n    color: var(--mg-yellow);\n    letter-spacing: 0.2em;\n    margin-bottom: 12px;\n    display: inline-block;\n  }\n  .mg-pf .mg-section-num.mg-center { display: block; text-align: center; }\n  .mg-pf .mg-section-title {\n    font-size: clamp(1.8rem, 4vw, 2.8rem);\n    font-weight: 800;\n    letter-spacing: -0.02em;\n    line-height: 1.1;\n    color: var(--mg-text);\n  }\n  .mg-pf .mg-section-sub {\n    margin-top: 16px;\n    font-size: 1rem;\n    color: var(--mg-text-dim);\n    max-width: 560px;\n  }\n  .mg-pf .mg-accent { color: var(--mg-yellow); }\n\n  \/* ===== About ===== *\/\n  .mg-pf .mg-about-grid {\n    display: grid;\n    grid-template-columns: 1.4fr 1fr;\n    gap: 50px;\n    align-items: start;\n  }\n  .mg-pf .mg-about-text p {\n    font-size: 1.05rem;\n    color: var(--mg-text-dim);\n    margin-bottom: 18px;\n    line-height: 1.8;\n  }\n  .mg-pf .mg-about-text strong { color: var(--mg-text); font-weight: 600; }\n  .mg-pf .mg-about-text strong.mg-accent { color: var(--mg-yellow); }\n  .mg-pf .mg-about-cards {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 14px;\n  }\n  .mg-pf .mg-info-card {\n    padding: 18px;\n    background: linear-gradient(135deg, var(--mg-black-2), var(--mg-black-3));\n    border: 1px solid var(--mg-gray);\n    border-radius: var(--mg-radius-sm);\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    transition: all var(--mg-transition);\n  }\n  .mg-pf .mg-info-card:hover {\n    border-color: var(--mg-yellow);\n    transform: translateY(-3px);\n    box-shadow: 0 10px 30px rgba(255, 214, 10, 0.1);\n  }\n  .mg-pf .mg-info-label {\n    font-size: 0.7rem;\n    color: var(--mg-text-mute);\n    text-transform: uppercase;\n    letter-spacing: 0.1em;\n    font-weight: 600;\n  }\n  .mg-pf .mg-info-value {\n    font-size: 0.9rem;\n    color: var(--mg-text);\n    font-weight: 500;\n  }\n\n  \/* ===== Projects ===== *\/\n  .mg-pf .mg-projects-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 22px;\n  }\n  .mg-pf .mg-project {\n    background: linear-gradient(135deg, var(--mg-black-2), var(--mg-black-3));\n    border: 1px solid var(--mg-gray);\n    border-radius: var(--mg-radius);\n    overflow: hidden;\n    transition: all var(--mg-transition);\n    position: relative;\n  }\n  .mg-pf .mg-project::before {\n    content: '';\n    position: absolute;\n    inset: 0;\n    background: var(--mg-gradient-soft);\n    opacity: 0;\n    transition: opacity var(--mg-transition);\n    pointer-events: none;\n  }\n  .mg-pf .mg-project:hover {\n    transform: translateY(-6px);\n    border-color: var(--mg-yellow);\n    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 214, 10, 0.1);\n  }\n  .mg-pf .mg-project:hover::before { opacity: 1; }\n  .mg-pf .mg-project-cover {\n    height: 150px;\n    background:\n      radial-gradient(circle at 70% 30%, rgba(255, 214, 10, 0.15), transparent 60%),\n      linear-gradient(135deg, var(--mg-black-3), #050505);\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-bottom: 1px solid var(--mg-gray);\n  }\n  .mg-pf .mg-project-tag {\n    position: absolute;\n    top: 14px;\n    left: 14px;\n    padding: 4px 12px;\n    background: rgba(255, 214, 10, 0.1);\n    border: 1px solid rgba(255, 214, 10, 0.3);\n    border-radius: 100px;\n    font-size: 0.65rem;\n    font-weight: 600;\n    color: var(--mg-yellow);\n    letter-spacing: 0.05em;\n    text-transform: uppercase;\n  }\n  .mg-pf .mg-project-icon {\n    font-size: 3rem;\n    filter: drop-shadow(0 4px 12px rgba(255, 214, 10, 0.3));\n  }\n  .mg-pf .mg-project-body {\n    padding: 22px;\n    position: relative;\n    z-index: 1;\n  }\n  .mg-pf .mg-project-body h3 {\n    font-size: 1.15rem;\n    font-weight: 700;\n    margin-bottom: 10px;\n    letter-spacing: -0.01em;\n    color: var(--mg-text);\n  }\n  .mg-pf .mg-project-body p {\n    font-size: 0.88rem;\n    color: var(--mg-text-dim);\n    margin-bottom: 16px;\n    line-height: 1.6;\n  }\n  .mg-pf .mg-project-stack {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    margin-bottom: 18px;\n  }\n  .mg-pf .mg-project-stack span {\n    font-size: 0.7rem;\n    font-family: 'JetBrains Mono', monospace;\n    padding: 4px 10px;\n    background: var(--mg-black);\n    border: 1px solid var(--mg-gray-2);\n    border-radius: 6px;\n    color: var(--mg-text-dim);\n  }\n  .mg-pf .mg-project-links {\n    display: flex;\n    gap: 16px;\n    align-items: center;\n  }\n  .mg-pf .mg-link-primary {\n    color: var(--mg-yellow);\n    font-weight: 600;\n    font-size: 0.88rem;\n  }\n  .mg-pf .mg-link-ghost {\n    color: var(--mg-text-mute);\n    font-size: 0.88rem;\n    font-weight: 500;\n    transition: color var(--mg-transition);\n  }\n  .mg-pf .mg-link-ghost:hover { color: var(--mg-text); }\n\n  \/* ===== Skills ===== *\/\n  .mg-pf .mg-skills-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n    gap: 22px;\n  }\n  .mg-pf .mg-skill-group {\n    padding: 28px;\n    background: linear-gradient(135deg, var(--mg-black-2), var(--mg-black-3));\n    border: 1px solid var(--mg-gray);\n    border-radius: var(--mg-radius);\n    transition: all var(--mg-transition);\n  }\n  .mg-pf .mg-skill-group:hover {\n    border-color: var(--mg-yellow);\n    transform: translateY(-4px);\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);\n  }\n  .mg-pf .mg-skill-head {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    margin-bottom: 20px;\n    padding-bottom: 16px;\n    border-bottom: 1px solid var(--mg-gray);\n  }\n  .mg-pf .mg-skill-icon {\n    font-size: 1.6rem;\n    width: 42px;\n    height: 42px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(255, 214, 10, 0.1);\n    border-radius: var(--mg-radius-sm);\n  }\n  .mg-pf .mg-skill-group h3 {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: var(--mg-text);\n  }\n  .mg-pf .mg-skill-group ul li {\n    padding: 10px 0;\n    font-size: 0.92rem;\n    color: var(--mg-text-dim);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.04);\n    position: relative;\n    padding-left: 22px;\n    transition: color var(--mg-transition);\n  }\n  .mg-pf .mg-skill-group ul li:last-child { border-bottom: none; }\n  .mg-pf .mg-skill-group ul li::before {\n    content: '\u25b8';\n    position: absolute;\n    left: 0;\n    color: var(--mg-yellow);\n    font-weight: bold;\n  }\n\n  \/* ===== Contact ===== *\/\n  .mg-pf .mg-contact-card {\n    padding: 60px 40px;\n    background:\n      radial-gradient(circle at 50% 0%, rgba(255, 214, 10, 0.1), transparent 50%),\n      linear-gradient(135deg, var(--mg-black-2), var(--mg-black-3));\n    border: 1px solid var(--mg-gray);\n    border-radius: var(--mg-radius-lg);\n    text-align: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .mg-pf .mg-contact-card::before {\n    content: '';\n    position: absolute;\n    top: -50%;\n    left: -10%;\n    width: 120%;\n    height: 200%;\n    background: conic-gradient(from 0deg, transparent, rgba(255, 214, 10, 0.06), transparent 30%);\n    animation: mg-rotate 12s linear infinite;\n    pointer-events: none;\n  }\n  @keyframes mg-rotate { to { transform: rotate(360deg); } }\n  .mg-pf .mg-contact-card > * { position: relative; z-index: 1; }\n  .mg-pf .mg-contact-actions {\n    display: flex;\n    gap: 16px;\n    justify-content: center;\n    margin-top: 36px;\n    margin-bottom: 30px;\n    flex-wrap: wrap;\n  }\n  .mg-pf .mg-socials {\n    display: flex;\n    gap: 12px;\n    justify-content: center;\n    align-items: center;\n    font-size: 0.88rem;\n  }\n  .mg-pf .mg-socials a {\n    color: var(--mg-text-dim);\n    transition: color var(--mg-transition);\n    font-weight: 500;\n  }\n  .mg-pf .mg-socials a:hover { color: var(--mg-yellow); }\n  .mg-pf .mg-dot-sep { color: var(--mg-gray-2); }\n\n  \/* ===== Footer ===== *\/\n  .mg-pf .mg-footer {\n    text-align: center;\n    padding: 30px 6%;\n    border-top: 1px solid var(--mg-gray);\n    color: var(--mg-text-mute);\n    font-size: 0.85rem;\n    position: relative;\n    z-index: 1;\n  }\n\n  \/* ===== Responsive ===== *\/\n  @media (max-width: 1024px) {\n    .mg-pf .mg-hero { grid-template-columns: 1fr; gap: 50px; padding: 60px 5%; }\n    .mg-pf .mg-about-grid { grid-template-columns: 1fr; gap: 30px; }\n    .mg-pf .mg-image-frame { width: 300px; height: 380px; }\n  }\n  @media (max-width: 768px) {\n    .mg-pf .mg-nav-links { display: none; }\n    .mg-pf .mg-section { padding: 60px 5%; }\n    .mg-pf .mg-stats { gap: 18px; }\n    .mg-pf .mg-stat strong { font-size: 1.4rem; }\n    .mg-pf .mg-contact-card { padding: 40px 20px; }\n    .mg-pf .mg-about-cards { grid-template-columns: 1fr; }\n    .mg-pf .mg-floating-badge { font-size: 0.7rem; padding: 7px 12px; }\n    .mg-pf .mg-badge-1 { left: 0; }\n    .mg-pf .mg-badge-2 { right: 0; }\n    .mg-pf .mg-badge-3 { left: 0; }\n  }\n<\/style>\n\n<div class=\"mg-pf\" id=\"mgPortfolio\">\n  <div class=\"mg-bg-glow\"><\/div>\n  <div class=\"mg-bg-grid\"><\/div>\n\n  <!-- Nav -->\n  <nav class=\"mg-nav\">\n    <a href=\"#mgTop\" class=\"mg-brand\">\n      <span class=\"mg-brand-dot\"><\/span>\n      MG<span class=\"mg-brand-accent\">.<\/span>\n    <\/a>\n    <ul class=\"mg-nav-links\">\n      <li><a href=\"#mgAbout\">About<\/a><\/li>\n      <li><a href=\"#mgProjects\">Projects<\/a><\/li>\n      <li><a href=\"#mgSkills\">Skills<\/a><\/li>\n      <li><a href=\"#mgContact\">Contact<\/a><\/li>\n    <\/ul>\n    <a href=\"#mgContact\" class=\"mg-nav-cta\">Hire Me<\/a>\n  <\/nav>\n\n  <!-- Hero -->\n  <header class=\"mg-hero\" id=\"mgTop\">\n    <div class=\"mg-hero-content\">\n      <div class=\"mg-hero-tag\">\n        <span class=\"mg-dot-pulse\"><\/span>\n        <span class=\"mg-tag-text\">Available for projects<\/span>\n      <\/div>\n      <h1 class=\"mg-hero-title\">\n        Hi, I'm <span class=\"mg-grad-text\">Moaz Gad<\/span>.<br>\n        I build <span class=\"mg-grad-text\">AI tools<\/span><br>\n        for creative teams.\n      <\/h1>\n      <p class=\"mg-hero-sub\">\n        AI Integration Engineer &nbsp;|&nbsp; Full-Stack Developer<br>\n        6+ years turning ideas into shipped software \u2014 now focused on AI agents, generative AI, and custom SaaS.\n      <\/p>\n      <div class=\"mg-hero-cta\">\n        <a href=\"#mgProjects\" class=\"mg-btn mg-btn-primary\">View My Work \u2192<\/a>\n        <a href=\"#mgContact\" class=\"mg-btn mg-btn-ghost\">Get in Touch<\/a>\n      <\/div>\n      <div class=\"mg-stats\">\n        <div class=\"mg-stat\"><strong>6+<\/strong><span>Years Experience<\/span><\/div>\n        <div class=\"mg-stat-divider\"><\/div>\n        <div class=\"mg-stat\"><strong>20+<\/strong><span>Projects Shipped<\/span><\/div>\n        <div class=\"mg-stat-divider\"><\/div>\n        <div class=\"mg-stat\"><strong>10+<\/strong><span>AI Integrations<\/span><\/div>\n      <\/div>\n    <\/div>\n\n    <div class=\"mg-hero-image\">\n      <div class=\"mg-image-frame\">\n        <img decoding=\"async\" src=\"https:\/\/crewmasolution.com\/wp-content\/uploads\/2026\/05\/Moaz-Gad-Image.jpg\" alt=\"Moaz Gad\" \/>\n      <\/div>\n      <div class=\"mg-floating-badge mg-badge-1\">\u26a1 AI Agents<\/div>\n      <div class=\"mg-floating-badge mg-badge-2\">\ud83c\udfa8 Generative AI<\/div>\n      <div class=\"mg-floating-badge mg-badge-3\">\ud83d\udd0c SaaS<\/div>\n    <\/div>\n  <\/header>\n\n  <!-- About -->\n  <section class=\"mg-section\" id=\"mgAbout\">\n    <div class=\"mg-section-head\">\n      <span class=\"mg-section-num\">01<\/span>\n      <h2 class=\"mg-section-title\">About Me<\/h2>\n    <\/div>\n    <div class=\"mg-about-grid\">\n      <div class=\"mg-about-text\">\n        <p>Full-Stack Software Engineer with <strong>6+ years<\/strong> of experience in <strong>React, Node.js, PHP, and C++<\/strong>, backed by a Bachelor's in Computer Engineering.<\/p>\n        <p>Hands-on with <strong class=\"mg-accent\">AI agents and generative AI<\/strong> \u2014 voice synthesis, text-to-image, and multimodal pipelines \u2014 building custom SaaS and tools that empower creative teams to produce content faster.<\/p>\n        <p>I bridge engineering with creative workflows, turning emerging AI tech into practical, production-ready services.<\/p>\n      <\/div>\n      <div class=\"mg-about-cards\">\n        <div class=\"mg-info-card\"><span class=\"mg-info-label\">Location<\/span><span class=\"mg-info-value\">Abu Dhabi, UAE<\/span><\/div>\n        <div class=\"mg-info-card\"><span class=\"mg-info-label\">Email<\/span><span class=\"mg-info-value\">moaz.a.gad@gmail.com<\/span><\/div>\n        <div class=\"mg-info-card\"><span class=\"mg-info-label\">Phone<\/span><span class=\"mg-info-value\">+971 50 867 4703<\/span><\/div>\n        <div class=\"mg-info-card\"><span class=\"mg-info-label\">Education<\/span><span class=\"mg-info-value\">B.Eng. Computer Eng.<\/span><\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Projects -->\n  <section class=\"mg-section\" id=\"mgProjects\">\n    <div class=\"mg-section-head\">\n      <span class=\"mg-section-num\">02<\/span>\n      <h2 class=\"mg-section-title\">Featured Projects<\/h2>\n      <p class=\"mg-section-sub\">Real-world AI tools and SaaS \u2014 proof of work over promises.<\/p>\n    <\/div>\n    <div class=\"mg-projects-grid\">\n      <article class=\"mg-project\">\n        <div class=\"mg-project-cover\"><span class=\"mg-project-tag\">WhatsApp \u00b7 AI<\/span><div class=\"mg-project-icon\">\ud83d\udcac<\/div><\/div>\n        <div class=\"mg-project-body\">\n          <h3>WhatsApp AI Assistant<\/h3>\n          <p>Multimodal ChatGPT-powered chatbot for WhatsApp \u2014 text, voice, and image input with RAG responses.<\/p>\n          <div class=\"mg-project-stack\"><span>Node.js<\/span><span>OpenAI<\/span><span>Baileys<\/span><span>RAG<\/span><\/div>\n          <div class=\"mg-project-links\"><a href=\"#\" class=\"mg-link-primary\">View Demo \u2192<\/a><a href=\"#\" class=\"mg-link-ghost\">GitHub<\/a><\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"mg-project\">\n        <div class=\"mg-project-cover\"><span class=\"mg-project-tag\">RAG \u00b7 PDF AI<\/span><div class=\"mg-project-icon\">\ud83d\udcc4<\/div><\/div>\n        <div class=\"mg-project-body\">\n          <h3>ChatPDF \u2014 PDF Agent<\/h3>\n          <p>Upload any PDF and chat with it. LangChain + vector search for instant, source-cited answers.<\/p>\n          <div class=\"mg-project-stack\"><span>Next.js<\/span><span>LangChain<\/span><span>Pinecone<\/span><span>OpenAI<\/span><\/div>\n          <div class=\"mg-project-links\"><a href=\"#\" class=\"mg-link-primary\">View Demo \u2192<\/a><a href=\"#\" class=\"mg-link-ghost\">GitHub<\/a><\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"mg-project\">\n        <div class=\"mg-project-cover\"><span class=\"mg-project-tag\">Image Gen \u00b7 SaaS<\/span><div class=\"mg-project-icon\">\ud83c\udfa8<\/div><\/div>\n        <div class=\"mg-project-body\">\n          <h3>VisualForge \u2014 AI Image Studio<\/h3>\n          <p>Text-to-image SaaS with Stable Diffusion. Credits, billing, and gallery for creative teams.<\/p>\n          <div class=\"mg-project-stack\"><span>Next.js<\/span><span>Stable Diffusion<\/span><span>Stripe<\/span><span>Supabase<\/span><\/div>\n          <div class=\"mg-project-links\"><a href=\"#\" class=\"mg-link-primary\">View Demo \u2192<\/a><a href=\"#\" class=\"mg-link-ghost\">GitHub<\/a><\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"mg-project\">\n        <div class=\"mg-project-cover\"><span class=\"mg-project-tag\">Voice AI<\/span><div class=\"mg-project-icon\">\ud83c\udf99\ufe0f<\/div><\/div>\n        <div class=\"mg-project-body\">\n          <h3>VoiceCast \u2014 TTS Voiceover<\/h3>\n          <p>Generate studio-quality voiceovers from text. ElevenLabs + Whisper for cloning & dictation.<\/p>\n          <div class=\"mg-project-stack\"><span>React<\/span><span>ElevenLabs<\/span><span>Whisper<\/span><span>Node.js<\/span><\/div>\n          <div class=\"mg-project-links\"><a href=\"#\" class=\"mg-link-primary\">View Demo \u2192<\/a><a href=\"#\" class=\"mg-link-ghost\">GitHub<\/a><\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"mg-project\">\n        <div class=\"mg-project-cover\"><span class=\"mg-project-tag\">Automation \u00b7 n8n<\/span><div class=\"mg-project-icon\">\u2699\ufe0f<\/div><\/div>\n        <div class=\"mg-project-body\">\n          <h3>Marketing Automation Suite<\/h3>\n          <p>n8n workflows linking Meta, TikTok, Odoo, and CRM \u2014 capture to nurture, fully automated.<\/p>\n          <div class=\"mg-project-stack\"><span>n8n<\/span><span>Meta API<\/span><span>TikTok API<\/span><span>Odoo<\/span><\/div>\n          <div class=\"mg-project-links\"><a href=\"#\" class=\"mg-link-primary\">View Demo \u2192<\/a><a href=\"#\" class=\"mg-link-ghost\">GitHub<\/a><\/div>\n        <\/div>\n      <\/article>\n\n      <article class=\"mg-project\">\n        <div class=\"mg-project-cover\"><span class=\"mg-project-tag\">E-commerce \u00b7 CMS<\/span><div class=\"mg-project-icon\">\ud83d\uded2<\/div><\/div>\n        <div class=\"mg-project-body\">\n          <h3>Custom E-commerce Builds<\/h3>\n          <p>Tailored e-commerce platforms with headless CMS \u2014 fast, branded, conversion-optimized.<\/p>\n          <div class=\"mg-project-stack\"><span>React<\/span><span>Node.js<\/span><span>Strapi<\/span><span>Stripe<\/span><\/div>\n          <div class=\"mg-project-links\"><a href=\"#\" class=\"mg-link-primary\">View Demo \u2192<\/a><a href=\"#\" class=\"mg-link-ghost\">GitHub<\/a><\/div>\n        <\/div>\n      <\/article>\n    <\/div>\n  <\/section>\n\n  <!-- Skills -->\n  <section class=\"mg-section\" id=\"mgSkills\">\n    <div class=\"mg-section-head\">\n      <span class=\"mg-section-num\">03<\/span>\n      <h2 class=\"mg-section-title\">Skills & Stack<\/h2>\n    <\/div>\n    <div class=\"mg-skills-grid\">\n      <div class=\"mg-skill-group\">\n        <div class=\"mg-skill-head\"><span class=\"mg-skill-icon\">\ud83e\udd16<\/span><h3>AI & Automation<\/h3><\/div>\n        <ul><li>Generative AI<\/li><li>AI Agents<\/li><li>LLM Integration (OpenAI)<\/li><li>Prompt Engineering<\/li><li>n8n Workflows<\/li><\/ul>\n      <\/div>\n      <div class=\"mg-skill-group\">\n        <div class=\"mg-skill-head\"><span class=\"mg-skill-icon\">\ud83d\udcbb<\/span><h3>Development<\/h3><\/div>\n        <ul><li>React.js<\/li><li>Angular<\/li><li>Node.js<\/li><li>TypeScript \/ JavaScript<\/li><li>PHP \/ C++<\/li><\/ul>\n      <\/div>\n      <div class=\"mg-skill-group\">\n        <div class=\"mg-skill-head\"><span class=\"mg-skill-icon\">\ud83d\udd0c<\/span><h3>Integrations<\/h3><\/div>\n        <ul><li>REST APIs<\/li><li>Meta & TikTok APIs<\/li><li>WhatsApp Business API<\/li><li>Odoo ERP<\/li><li>E-commerce & CMS<\/li><\/ul>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Contact -->\n  <section class=\"mg-section\" id=\"mgContact\">\n    <div class=\"mg-contact-card\">\n      <div class=\"mg-section-head\" style=\"text-align:center; margin-bottom: 0;\">\n        <span class=\"mg-section-num mg-center\">04<\/span>\n        <h2 class=\"mg-section-title\">Let's build something.<\/h2>\n        <p class=\"mg-section-sub\" style=\"margin-left:auto; margin-right:auto;\">\n          Got an AI tool or SaaS idea? Need someone to wire it all together?<br>\n          I'm one message away.\n        <\/p>\n      <\/div>\n      <div class=\"mg-contact-actions\">\n        <a href=\"mailto:moaz.a.gad@gmail.com\" class=\"mg-btn mg-btn-primary mg-btn-lg\">\u2709\ufe0f moaz.a.gad@gmail.com<\/a>\n        <a href=\"tel:+971508674703\" class=\"mg-btn mg-btn-ghost mg-btn-lg\">\ud83d\udcf1 +971 50 867 4703<\/a>\n      <\/div>\n      <div class=\"mg-socials\">\n        <a href=\"#\">LinkedIn<\/a>\n        <span class=\"mg-dot-sep\">\u2022<\/span>\n        <a href=\"#\">GitHub<\/a>\n        <span class=\"mg-dot-sep\">\u2022<\/span>\n        <a href=\"#\">Twitter<\/a>\n      <\/div>\n    <\/div>\n  <\/section>\n\n  <!-- Footer -->\n  <footer class=\"mg-footer\">\n    <p>\u00a9 2026 Moaz Gad. Built with <span class=\"mg-accent\">&lt;\/&gt;<\/span> in Abu Dhabi.<\/p>\n  <\/footer>\n<\/div>\n\n<script>\n(function() {\n  var root = document.getElementById('mgPortfolio');\n  if (!root) return;\n\n  \/\/ Smooth scroll within the widget\n  root.querySelectorAll('a[href^=\"#mg\"]').forEach(function(link) {\n    link.addEventListener('click', function(e) {\n      var id = link.getAttribute('href');\n      if (id === '#') return;\n      var target = document.querySelector(id);\n      if (!target) return;\n      e.preventDefault();\n      target.scrollIntoView({ behavior: 'smooth', block: 'start' });\n    });\n  });\n\n  \/\/ Reveal on scroll\n  var revealEls = root.querySelectorAll('.mg-section, .mg-project, .mg-skill-group, .mg-info-card');\n  revealEls.forEach(function(el) {\n    el.style.opacity = '0';\n    el.style.transform = 'translateY(24px)';\n    el.style.transition = 'opacity 0.7s ease, transform 0.7s ease';\n  });\n  if ('IntersectionObserver' in window) {\n    var obs = new IntersectionObserver(function(entries) {\n      entries.forEach(function(entry) {\n        if (entry.isIntersecting) {\n          entry.target.style.opacity = '1';\n          entry.target.style.transform = 'translateY(0)';\n          obs.unobserve(entry.target);\n        }\n      });\n    }, { threshold: 0.1, rootMargin: '0px 0px -50px 0px' });\n    revealEls.forEach(function(el) { obs.observe(el); });\n  } else {\n    revealEls.forEach(function(el) { el.style.opacity = '1'; el.style.transform = 'none'; });\n  }\n\n  \/\/ Cycle hero tag text\n  var tagText = root.querySelector('.mg-tag-text');\n  if (tagText) {\n    var states = ['Available for projects', 'Open to AI roles', 'Building cool stuff'];\n    var idx = 0;\n    setInterval(function() {\n      idx = (idx + 1) % states.length;\n      tagText.textContent = states[idx];\n    }, 3500);\n  }\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\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>MG. About Projects Skills Contact Hire Me Available for projects Hi, I&#8217;m Moaz Gad. I build AI tools for creative teams. AI Integration Engineer &nbsp;|&nbsp; Full-Stack Developer 6+ years turning ideas into shipped software \u2014 now focused on AI agents, generative AI, and custom SaaS. View My Work \u2192 Get in Touch 6+Years Experience 20+Projects [&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":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crewmasolution.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crewmasolution.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crewmasolution.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crewmasolution.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crewmasolution.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":5,"href":"https:\/\/crewmasolution.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":25,"href":"https:\/\/crewmasolution.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/25"}],"wp:attachment":[{"href":"https:\/\/crewmasolution.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}