{"id":2,"date":"2026-07-06T15:43:00","date_gmt":"2026-07-06T15:43:00","guid":{"rendered":"https:\/\/webmatrixshub.com\/?page_id=2"},"modified":"2026-07-09T05:52:09","modified_gmt":"2026-07-09T05:52:09","slug":"home","status":"publish","type":"page","link":"https:\/\/webmatrixshub.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2\" class=\"elementor elementor-2\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-526e1bec e-con-full e-flex e-con e-parent\" data-id=\"526e1bec\" data-element_type=\"container\" data-e-type=\"container\" id=\"home\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ed3bffc elementor-widget elementor-widget-html\" data-id=\"ed3bffc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Main Hero Section -->\n<!-- min-h-[80vh] updated to min-h-[10vh] md:min-h-[10vh] for mobile-specific height scaling -->\n<section id=\"home\" class=\"relative min-h-[10vh] md:min-h-[80vh] bg-brand-black flex flex-col lg:flex-row lg:items-center lg:justify-center overflow-hidden pt-10 pb-8 sm:py-16\"> \n  \n  <!-- Custom Keyframe & Transition CSS -->\n  <style>\n    @keyframes gentle-float {\n      0%, 100% { transform: translateY(0); }\n      50% { transform: translateY(-10px); }\n    }\n    .animate-hero-image {\n      animation: gentle-float 3s ease-in-out infinite;\n    }\n\n    \/* Staggered Expo Easing Transitions matching premium portfolio standards *\/\n    .hero-slide {\n      pointer-events: none;\n      z-index: 10;\n      transition: opacity 0.4s ease-in-out;\n    }\n    \n    .hero-slide.slide-active {\n      pointer-events: auto;\n      z-index: 20;\n    }\n\n    \/* Set default entry animation states (fading DOWN from above) *\/\n    .hero-slide .slide-badge,\n    .hero-slide .slide-heading,\n    .hero-slide .slide-desc,\n    .hero-slide .slide-btn-group {\n      opacity: 0;\n      transform: translateY(-24px); \/* Starts elevated to slide down *\/\n      transition: opacity 0.85s cubic-bezier(0.19, 1, 0.22, 1), transform 0.85s cubic-bezier(0.19, 1, 0.22, 1);\n    }\n\n    \/* Active entrance staggers *\/\n    .slide-active .slide-badge {\n      opacity: 1;\n      transform: translateY(0);\n      transition-delay: 150ms;\n    }\n    \n    .slide-active .slide-heading {\n      opacity: 1;\n      transform: translateY(0);\n      transition-delay: 250ms;\n    }\n    \n    .slide-active .slide-desc {\n      opacity: 1;\n      transform: translateY(0);\n      transition-delay: 350ms;\n    }\n    \n    .slide-active .slide-btn-group {\n      opacity: 1;\n      transform: translateY(0);\n      transition-delay: 450ms;\n    }\n\n    \/* Fast, clean exit transitions with zero delay to prevent overlap visual bugs *\/\n    .slide-inactive .slide-badge,\n    .slide-inactive .slide-heading,\n    .slide-inactive .slide-desc,\n    .slide-inactive .slide-btn-group {\n      opacity: 0;\n      transform: translateY(12px); \/* Slides slightly down and out quickly *\/\n      transition: opacity 0.3s ease-in, transform 0.3s ease-in;\n      transition-delay: 0ms !important;\n    }\n\n    .hero-tech-lines {\n      background-image: radial-gradient(circle, rgba(140, 230, 41, 0.04) 1px, transparent 1px);\n      background-size: 32px 32px;\n    }\n\n    #dot-1, #dot-2, #dot-3,\n    #dot-1 *, #dot-2 *, #dot-3 * {\n      -webkit-tap-highlight-color: transparent !important;\n      outline: none !important;\n      outline: 0 !important;\n      box-shadow: none !important;\n      border-style: solid;\n    }\n    \n    #dot-1, #dot-2, #dot-3 {\n      background: transparent !important;\n      background-color: transparent !important;\n      border: none !important; \/* Remove any default button borders *\/\n      padding: 0 !important;\n    }\n\n    #dot-1:focus, #dot-2:focus, #dot-3:focus,\n    #dot-1:active, #dot-2:active, #dot-3:active {\n      outline: none !important;\n      background-color: transparent !important;\n    }\n    \n    .slide-btn-group a {\n      -webkit-tap-highlight-color: transparent !important;\n      outline: none !important;\n    }\n  <\/style>\n\n  <!-- Visual backgrounds -->\n  <div class=\"absolute inset-0 hero-tech-lines opacity-60\"><\/div>\n  <div class=\"absolute w-[260px] h-[260px] sm:w-[420px] sm:h-[420px] glowing-bg top-8 left-1\/2 -translate-x-1\/2 lg:left-12 lg:translate-x-0 opacity-70\"><\/div>\n  <div class=\"absolute w-[260px] h-[260px] sm:w-[420px] sm:h-[420px] glowing-bg bottom-8 right-1\/2 translate-x-1\/2 lg:right-12 lg:translate-x-0 opacity-70\"><\/div>\n\n  <div class=\"max-w-7xl mx-auto px-5 sm:px-8 w-full grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-10 items-center relative z-10\">\n    \n    <!-- LEFT SIDE: Staggered Content Area -->\n    <div class=\"lg:col-span-7 relative min-h-[360px] sm:min-h-[420px] lg:h-[450px] flex flex-col justify-center overflow-hidden text-center lg:text-left\">\n      \n      <!-- Slide 1 -->\n      <div id=\"slide-1\" class=\"hero-slide slide-active absolute inset-0 flex flex-col justify-center space-y-4 sm:space-y-6 pt-0\">\n        <div class=\"slide-badge\">\n          <span class=\"inline-flex items-center justify-center gap-2 px-3.5 py-1 bg-brand-accent\/10 border border-brand-accent\/20 rounded-full text-brand-accent text-[10px] sm:text-xs font-semibold tracking-wider uppercase\">\n            <span class=\"w-1.5 h-1.5 bg-brand-accent rounded-full animate-pulse\"><\/span> Certified Web Developer\n          <\/span>\n        <\/div>\n        \n        <!-- text-30px updated to text-[28px] on mobile to reduce font size by 2px -->\n        <h1 class=\"slide-heading text-[28px] sm:text-4xl lg:text-[48px] font-extrabold leading-[1.12] lg:leading-[1.2] tracking-tight text-white uppercase\">\n          High-Performance <br> <span class=\"gradient-text\">SEO-Optimized Websites<\/span>\n        <\/h1>\n        \n        <p class=\"slide-desc text-brand-textMuted text-sm lg:text-base max-w-xl mx-auto lg:mx-0 leading-relaxed\">\n          I combine high-end development, responsive layouts, and technical SEO structure to build websites that capture qualified leads and increase customer acquisition rates.\n        <\/p>\n        \n        <div class=\"slide-btn-group flex flex-col sm:flex-row justify-center lg:justify-start gap-3 pt-1 sm:pt-2 w-full sm:w-auto\">\n          <a href=\"#portfolio\" class=\"inline-flex items-center justify-center gap-2 px-6 py-4 bg-brand-accent text-brand-black text-xs font-bold tracking-wider uppercase rounded-lg hover:bg-brand-accentHover transition-all duration-300 shadow-[0_0_15px_rgba(140,230,41,0.2)] hover:shadow-[0_0_25px_rgba(140,230,41,0.45)] w-full sm:w-auto\">\n            View Projects <i class=\"fa-solid fa-arrow-right text-[10px]\"><\/i>\n          <\/a>\n          <a href=\"https:\/\/wa.me\/2349138858007\" target=\"_blank\" class=\"inline-flex items-center justify-center px-6 py-4 text-xs font-bold uppercase tracking-wider text-brand-accent bg-transparent border border-brand-accent rounded-lg hover:bg-brand-accent hover:text-brand-black transition-all duration-300 shadow-[0_0_12px_rgba(140,230,41,0.15)] hover:shadow-[0_0_22px_rgba(140,230,41,0.45)] w-full sm:w-auto\">\n            Chat on WhatsApp\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <!-- Slide 2 -->\n      <div id=\"slide-2\" class=\"hero-slide slide-inactive absolute inset-0 flex flex-col justify-center space-y-4 sm:space-y-6 pt-0\">\n        <div class=\"slide-badge\">\n          <span class=\"inline-flex items-center justify-center gap-2 px-3.5 py-1 bg-brand-accent\/10 border border-brand-accent\/20 rounded-full text-brand-accent text-[10px] sm:text-xs font-semibold tracking-wider uppercase\">\n            <span class=\"w-1.5 h-1.5 bg-brand-accent rounded-full animate-pulse\"><\/span> Outright Confidence On Fiverr\n          <\/span>\n        <\/div>\n        \n        <!-- text-30px updated to text-[28px] on mobile to reduce font size by 2px -->\n        <h1 class=\"slide-heading text-[28px] sm:text-4xl lg:text-[48px] font-extrabold leading-[1.12] lg:leading-[1.2] tracking-tight text-white uppercase\">\n          Secure Orders and <br> <span class=\"gradient-text\">Verified Delivery<\/span>\n        <\/h1>\n        \n        <p class=\"slide-desc text-brand-textMuted text-sm lg:text-base max-w-xl mx-auto lg:mx-0 leading-relaxed\">\n          Order securely through the world's leading freelance marketplace. Access fixed milestone plans, dedicated customer safety policies, and transparent progress reports.\n        <\/p>\n        \n        <div class=\"slide-btn-group flex flex-col sm:flex-row justify-center lg:justify-start gap-3 pt-1 sm:pt-2 w-full sm:w-auto\">\n          <a href=\"#portfolio\" class=\"inline-flex items-center justify-center gap-2 px-6 py-4 bg-brand-accent text-brand-black text-xs font-bold tracking-wider uppercase rounded-lg hover:bg-brand-accentHover transition-all duration-300 shadow-[0_0_15px_rgba(140,230,41,0.2)] hover:shadow-[0_0_25px_rgba(140,230,41,0.45)] w-full sm:w-auto\">\n            View Projects <i class=\"fa-solid fa-arrow-right text-[10px]\"><\/i>\n          <\/a>\n          <a href=\"https:\/\/www.fiverr.com\/s\/WERz1wL\" target=\"_blank\" class=\"inline-flex items-center justify-center px-6 py-4 text-xs font-bold uppercase tracking-wider text-brand-accent bg-transparent border border-brand-accent rounded-lg hover:bg-brand-accent hover:text-brand-black transition-all duration-300 shadow-[0_0_12px_rgba(140,230,41,0.15)] hover:shadow-[0_0_22px_rgba(140,230,41,0.45)] w-full sm:w-auto\">\n            Order on Fiverr\n          <\/a>\n        <\/div>\n      <\/div>\n\n      <!-- Slide 3 -->\n      <div id=\"slide-3\" class=\"hero-slide slide-inactive absolute inset-0 flex flex-col justify-center space-y-4 sm:space-y-6 pt-0\">\n        <div class=\"slide-badge\">\n          <span class=\"inline-flex items-center justify-center gap-2 px-3.5 py-1 bg-brand-accent\/10 border border-brand-accent\/20 rounded-full text-brand-accent text-[10px] sm:text-xs font-semibold tracking-wider uppercase\">\n            <span class=\"w-1.5 h-1.5 bg-brand-accent rounded-full animate-pulse\"><\/span> Top Rated Talent on Upwork\n          <\/span>\n        <\/div>\n        \n        <!-- text-30px updated to text-[28px] on mobile to reduce font size by 2px -->\n        <h1 class=\"slide-heading text-[28px] sm:text-4xl lg:text-[48px] font-extrabold leading-[1.12] lg:leading-[1.2] tracking-tight text-white uppercase\">\n          Start A Contract, <br> <span class=\"gradient-text\">Get A Custom Quote<\/span>\n        <\/h1>\n        \n        <p class=\"slide-desc text-brand-textMuted text-sm lg:text-base max-w-xl mx-auto lg:mx-0 leading-relaxed\">\n          Partner directly via hourly or custom fixed-price terms with Upwork's top vetted talent. Gain 24\/7 communications and direct access to over 6 years of technical engineering experience.\n        <\/p>\n        \n        <div class=\"slide-btn-group flex flex-col sm:flex-row justify-center lg:justify-start gap-3 pt-1 sm:pt-2 w-full sm:w-auto\">\n          <a href=\"#portfolio\" class=\"inline-flex items-center justify-center gap-2 px-6 py-4 bg-brand-accent text-brand-black text-xs font-bold tracking-wider uppercase rounded-lg hover:bg-brand-accentHover transition-all duration-300 shadow-[0_0_15px_rgba(140,230,41,0.2)] hover:shadow-[0_0_25px_rgba(140,230,41,0.45)] w-full sm:w-auto\">\n            View Projects <i class=\"fa-solid fa-arrow-right text-[10px]\"><\/i>\n          <\/a>\n          <a href=\"https:\/\/www.upwork.com\/freelancers\/~016ad1f46e822e160e?mp_source=share\" target=\"_blank\" class=\"inline-flex items-center justify-center px-6 py-4 text-xs font-bold uppercase tracking-wider text-brand-accent bg-transparent border border-brand-accent rounded-lg hover:bg-brand-accent hover:text-brand-black transition-all duration-300 shadow-[0_0_12px_rgba(140,230,41,0.15)] hover:shadow-[0_0_22px_rgba(140,230,41,0.45)] w-full sm:w-auto\">\n            Order on Upwork\n          <\/a>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- CENTER RIGHT: Centralized Logo Column (Responsive display class changed to hidden lg:flex to disable mobile rendering) -->\n    <div class=\"hidden lg:flex lg:col-span-4 relative justify-center items-center w-full mt-6 lg:mt-0\">\n      <div class=\"relative w-48 h-48 sm:w-64 sm:h-64 lg:w-80 lg:h-80 flex items-center justify-center overflow-hidden animate-hero-image select-none mx-auto\">\n        \n        <img decoding=\"async\" src=\"http:\/\/webmatrixshub.com\/wp-content\/uploads\/2026\/07\/webmatrixs-favicon-2.png\" \n             alt=\"Webmatrixs Logo Mark\" \n             class=\"max-w-full max-h-full object-contain object-center transition-transform duration-700 ease-in-out hover:scale-[1.02]\">\n             \n      <\/div>\n    <\/div>\n\n    <!-- EXTREME RIGHT: Vertical Pagination Nav Indicators (Spans 1 Column) -->\n    <div class=\"lg:col-span-1 hidden lg:flex flex-col gap-6 items-center justify-center\">\n      <button onclick=\"goToSlide(1)\" id=\"dot-1\" class=\"group flex flex-col items-center focus:outline-none focus:ring-0 active:outline-none outline-none\" aria-label=\"Slide 1\">\n        <span class=\"text-[10px] font-extrabold tracking-wider transition-colors duration-300\" style=\"color: #8CE629; background: transparent;\">01<\/span>\n        <span class=\"w-7 h-7 rounded-full flex items-center justify-center transition-all duration-300 mt-2\" style=\"border: 1px solid #8CE629; background-color: #8CE629;\">\n          <span class=\"w-1.5 h-1.5 bg-brand-black rounded-full\"><\/span>\n        <\/span>\n      <\/button>\n\n      <button onclick=\"goToSlide(2)\" id=\"dot-2\" class=\"group flex flex-col items-center focus:outline-none focus:ring-0 active:outline-none outline-none\" aria-label=\"Slide 2\">\n        <span class=\"text-[10px] font-extrabold tracking-wider transition-colors duration-300 group-hover:text-brand-accent\" style=\"color: #94A3B8; background: transparent;\">02<\/span>\n        <span class=\"w-7 h-7 rounded-full flex items-center justify-center transition-all duration-300 mt-2\" style=\"border: 1px solid #1F1F24; background-color: transparent;\">\n          <span class=\"w-1.5 h-1.5 bg-transparent rounded-full\"><\/span>\n        <\/span>\n      <\/button>\n\n      <button onclick=\"goToSlide(3)\" id=\"dot-3\" class=\"group flex flex-col items-center focus:outline-none focus:ring-0 active:outline-none outline-none\" aria-label=\"Slide 3\">\n        <span class=\"text-[10px] font-extrabold tracking-wider transition-colors duration-300 group-hover:text-brand-accent\" style=\"color: #94A3B8; background: transparent;\">03<\/span>\n        <span class=\"w-7 h-7 rounded-full flex items-center justify-center transition-all duration-300 mt-2\" style=\"border: 1px solid #1F1F24; background-color: transparent;\">\n          <span class=\"w-1.5 h-1.5 bg-transparent rounded-full\"><\/span>\n        <\/span>\n      <\/button>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- Vanilla JS Slideshow Transition script -->\n<script>\n  let currentSlide = 1;\n  const totalSlides = 3;\n\n  function goToSlide(slideNum) {\n    if (slideNum < 1 || slideNum > totalSlides) return;\n\n    for (let i = 1; i <= totalSlides; i++) {\n      const slide = document.getElementById(`slide-${i}`);\n      const dot = document.getElementById(`dot-${i}`);\n      const dotLabel = dot ? dot.querySelector('span:first-child') : null;\n      const dotCircle = dot ? dot.querySelector('span:last-child') : null;\n      const dotInner = dotCircle ? dotCircle.querySelector('span') : null;\n\n      if (i === slideNum) {\n        slide.classList.remove('slide-inactive');\n        slide.classList.add('slide-active');\n\n        if (dotLabel) {\n          dotLabel.style.setProperty('color', '#8CE629', 'important');\n          dotLabel.style.setProperty('background', 'transparent', 'important');\n          dotLabel.style.setProperty('background-color', 'transparent', 'important');\n        }\n        if (dotCircle) {\n          dotCircle.style.setProperty('border', '1px solid #8CE629', 'important');\n          dotCircle.style.setProperty('background-color', '#8CE629', 'important');\n        }\n        if (dotInner) {\n          dotInner.style.setProperty('background-color', '#030303', 'important');\n        }\n      } else {\n        slide.classList.remove('slide-active');\n        slide.classList.add('slide-inactive');\n\n        if (dotLabel) {\n          dotLabel.style.setProperty('color', '#94A3B8', 'important');\n          dotLabel.style.setProperty('background', 'transparent', 'important');\n          dotLabel.style.setProperty('background-color', 'transparent', 'important');\n        }\n        if (dotCircle) {\n          dotCircle.style.setProperty('border', '1px solid #1F1F24', 'important');\n          dotCircle.style.setProperty('background-color', 'transparent', 'important');\n        }\n        if (dotInner) {\n          dotInner.style.setProperty('background-color', 'transparent', 'important');\n        }\n      }\n    }\n\n    currentSlide = slideNum;\n  }\n\n  \/\/ Auto loop (every 5 seconds)\n  setInterval(() => {\n    let nextSlide = currentSlide + 1;\n    if (nextSlide > totalSlides) {\n      nextSlide = 1;\n    }\n    goToSlide(nextSlide);\n  }, 5000);\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-7e01fb9 e-con-full e-flex e-con e-parent\" data-id=\"7e01fb9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-59fe568 elementor-widget elementor-widget-html\" data-id=\"59fe568\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= METRICS INFINITE MARQUEE SLIDER ================= -->\n<section class=\"border-y border-brand-border bg-brand-card\/40 relative overflow-hidden py-10 z-10 select-none\">\n  \n  <style>\n    @keyframes marquee {\n      0% { transform: translateX(0%); }\n      100% { transform: translateX(-50%); }\n    }\n    \n    .animate-marquee-loop {\n      display: flex;\n      width: max-content;\n      \/* Adjusted duration from 28s to 50s for a much slower, premium glide *\/\n      animation: marquee 50s linear infinite;\n    }\n\n    \/* Pause animation on hover for better user experience *\/\n    .animate-marquee-loop:hover {\n      animation-play-state: paused;\n    }\n  <\/style>\n\n  <!-- Left and Right Gradient Fades to blend the edges seamlessly into the black background -->\n  <div class=\"absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-brand-black to-transparent z-20 pointer-events-none\"><\/div>\n  <div class=\"absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-brand-black to-transparent z-20 pointer-events-none\"><\/div>\n\n  <!-- Marquee Container -->\n  <div class=\"w-full\">\n    <div class=\"animate-marquee-loop flex items-center gap-16\">\n      \n      <!-- FIRST INSTANCE: Full List of Items -->\n      <div class=\"flex items-center gap-16 shrink-0\">\n        \n        <!-- Upwork Job Success -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-brand-accent\">100%<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Upwork Job Success<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30 border border-brand-accent\/20 shadow-[0_0_8px_#8CE629]\"><\/span>\n\n        <!-- Web Experience -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-white\">6+<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Years Web Experience<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30 border border-brand-accent\/20 shadow-[0_0_8px_#8CE629]\"><\/span>\n\n        <!-- Talent Badge -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-white\">TOP RATED<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Talent Badge<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30 border border-brand-accent\/20 shadow-[0_0_8px_#8CE629]\"><\/span>\n\n        <!-- Response Time -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-brand-accent\">FAST<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Response Time<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30 border border-brand-accent\/20 shadow-[0_0_8px_#8CE629]\"><\/span>\n\n        <!-- Active Updates -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-white\">ACTIVE<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Updates & Communication<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30 border border-brand-accent\/20 shadow-[0_0_8px_#8CE629]\"><\/span>\n\n        <!-- WordPress Specialist -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-brand-accent\">WORDPRESS<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Specialist<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30 border border-brand-accent\/20 shadow-[0_0_8px_#8CE629]\"><\/span>\n\n        <!-- Brilliant Directory Expert -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-white\">BRILLIANT<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Directory Expert<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30 border border-brand-accent\/20 shadow-[0_0_8px_#8CE629]\"><\/span>\n\n        <!-- Real Estate Developer -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-brand-accent\">REAL ESTATE<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Developer<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30 border border-brand-accent\/20 shadow-[0_0_8px_#8CE629]\"><\/span>\n\n        <!-- IDX Listings -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-white\">IDX<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Listings Expert<\/p>\n        <\/div>\n\n      <\/div>\n\n      <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30 shrink-0 shadow-[0_0_8px_#8CE629]\"><\/span>\n\n      <!-- SECOND INSTANCE: Duplicate List (Snaps cleanly to start infinite loop) -->\n      <div class=\"flex items-center gap-16 shrink-0\" aria-hidden=\"true\">\n        \n        <!-- Upwork Job Success -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-brand-accent\">100%<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Upwork Job Success<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30\"><\/span>\n\n        <!-- Web Experience -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-white\">6+<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Years Web Experience<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30\"><\/span>\n\n        <!-- Talent Badge -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-white\">TOP RATED<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Talent Badge<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30\"><\/span>\n\n        <!-- Response Time -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-brand-accent\">FAST<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Response Time<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30\"><\/span>\n\n        <!-- Active Updates -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-white\">ACTIVE<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Updates & Communication<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30\"><\/span>\n\n        <!-- WordPress Specialist -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-brand-accent\">WORDPRESS<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Specialist<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30\"><\/span>\n\n        <!-- Brilliant Directory Expert -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-white\">BRILLIANT<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Directory Expert<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30\"><\/span>\n\n        <!-- Real Estate Developer -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-brand-accent\">REAL ESTATE<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Developer<\/p>\n        <\/div>\n\n        <span class=\"w-1.5 h-1.5 rounded-full bg-brand-accent\/30\"><\/span>\n\n        <!-- IDX Listings -->\n        <div class=\"flex items-center gap-3\">\n          <h3 class=\"text-xl sm:text-2xl font-extrabold text-white\">IDX<\/h3>\n          <p class=\"text-[10px] sm:text-xs text-brand-textMuted uppercase tracking-widest font-bold\">Listings Expert<\/p>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-82f6cb8 e-con-full e-flex e-con e-parent\" data-id=\"82f6cb8\" data-element_type=\"container\" data-e-type=\"container\" id=\"about\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3792a50 elementor-widget elementor-widget-html\" data-id=\"3792a50\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= ABOUT SECTION ================= -->\n<section id=\"about\" class=\"relative bg-brand-black py-20 overflow-hidden z-10\">\n  \n  <!-- Subtle back ambient glow -->\n  <div class=\"absolute w-[450px] h-[450px] glowing-bg bottom-12 left-1\/4 pointer-events-none opacity-40\"><\/div>\n\n  <div class=\"max-w-7xl mx-auto px-6 sm:px-8 relative z-10\">\n    <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center\">\n      \n      <!-- LEFT SIDE: Framed Portrait Card (Spans 5 Columns) -->\n      <div class=\"lg:col-span-5 relative flex justify-center lg:justify-start\">\n        <div class=\"premium-card p-3.5 rounded-2xl max-w-sm w-full relative group\">\n          \n          <!-- Image Wrapper with Grayscale transition -->\n          <div class=\"relative w-full h-[380px] sm:h-[420px] overflow-hidden rounded-xl bg-brand-black\">\n            <img decoding=\"async\" src=\"http:\/\/webmatrixshub.com\/wp-content\/uploads\/2026\/07\/5FC521F9-DF1C-4545-B5E7-31996E3FB03A.jpg\" \n                 alt=\"Jim A. Webmatrixs Portrait\" \n                 class=\"w-full h-full object-cover filter grayscale contrast-110 group-hover:grayscale-0 transition-all duration-700 ease-in-out\">\n                 \n            <!-- Vignette edge soft transition overlay -->\n            <div class=\"absolute inset-0 pointer-events-none\" \n                 style=\"background: linear-gradient(to top, rgba(3,3,3,0.8) 0%, transparent 20%);\">\n            <\/div>\n          <\/div>\n\n          <!-- Bottom caption card info -->\n          <div class=\"pt-4 pb-2 px-2 flex justify-between items-center\">\n            <div>\n              <h4 class=\"text-xs text-white font-bold uppercase tracking-wider\">Jim A.<\/h4>\n              <p class=\"text-[10px] text-brand-textMuted mt-0.5\">CEO & Lead Strategist, Webmatrixs<\/p>\n            <\/div>\n            <span class=\"inline-flex items-center gap-1.5 px-2.5 py-1 bg-brand-accent\/10 text-brand-accent text-[9px] font-bold rounded-full border border-brand-accent\/20\">\n              <span class=\"w-1 h-1 bg-brand-accent rounded-full\"><\/span> Remote HQ\n            <\/span>\n          <\/div>\n\n        <\/div>\n      <\/div>\n\n      <!-- RIGHT SIDE: Editorial About Content (Spans 7 Columns) -->\n      <div class=\"lg:col-span-7 space-y-6\">\n        \n        <!-- Header details -->\n        <div class=\"space-y-3\">\n          <span class=\"text-xs font-bold tracking-[0.2em] text-brand-accent uppercase\">\n            The Strategist\n          <\/span>\n          <h2 class=\"text-3xl sm:text-4xl font-extrabold text-white uppercase leading-tight\">\n            Bridging Web Engineering <br> with <span class=\"gradient-text\">Business Growth<\/span>\n          <\/h2>\n        <\/div>\n\n        <!-- Narrative Blocks -->\n        <p class=\"text-brand-textMuted text-sm sm:text-base leading-relaxed\">\n          I specialize in creating custom, high-performance web experiences that are responsive and optimized to help businesses scale. By combining modern front-end structure, clean UI\/UX standards, and conversion-focused architectures, I build online presences that attract qualified traffic and capture real leads.\n        <\/p>\n        <p class=\"text-brand-textMuted text-xs sm:text-sm leading-relaxed\">\n          As a certified WordPress Specialist and Brilliant Directory Expert with over 6 years of expertise, I deliver technical solutions with outright confidence. Whether setting up complex directory networks, MLS real estate systems, or sleek marketing funnels, every build is treated as a core utility engineered for growth.\n        <\/p>\n\n        <!-- Credentials Mini-Grid -->\n        <div class=\"grid grid-cols-2 gap-4 pt-4 border-t border-brand-border\">\n          \n          <!-- Skill Item 1 -->\n          <div class=\"bg-brand-card\/50 border border-brand-border rounded-xl p-4 transition-colors hover:border-brand-accent\/30 flex items-start gap-3\">\n            <div class=\"text-brand-accent text-sm mt-0.5\"><i class=\"fa-solid fa-business-time\"><\/i><\/div>\n            <div>\n              <h4 class=\"text-xs font-bold text-white uppercase tracking-wider\">6+ Years Experience<\/h4>\n              <p class=\"text-[11px] text-brand-textMuted mt-1\">Specialized engineering across CMS networks.<\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Skill Item 2 -->\n          <div class=\"bg-brand-card\/50 border border-brand-border rounded-xl p-4 transition-colors hover:border-brand-accent\/30 flex items-start gap-3\">\n            <div class=\"text-brand-accent text-sm mt-0.5\"><i class=\"fa-solid fa-language\"><\/i><\/div>\n            <div>\n              <h4 class=\"text-xs font-bold text-white uppercase tracking-wider\">Bilingual Support<\/h4>\n              <p class=\"text-[11px] text-brand-textMuted mt-1\">Fluent communication in English and French.<\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Skill Item 3 -->\n          <div class=\"bg-brand-card\/50 border border-brand-border rounded-xl p-4 transition-colors hover:border-brand-accent\/30 flex items-start gap-3\">\n            <div class=\"text-brand-accent text-sm mt-0.5\"><i class=\"fa-solid fa-circle-check\"><\/i><\/div>\n            <div>\n              <h4 class=\"text-xs font-bold text-white uppercase tracking-wider\">100% Vetted Trust<\/h4>\n              <p class=\"text-[11px] text-brand-textMuted mt-1\">Top Rated talent profile with validated metrics.<\/p>\n            <\/div>\n          <\/div>\n\n          <!-- Skill Item 4 -->\n          <div class=\"bg-brand-card\/50 border border-brand-border rounded-xl p-4 transition-colors hover:border-brand-accent\/30 flex items-start gap-3\">\n            <div class=\"text-brand-accent text-sm mt-0.5\"><i class=\"fa-solid fa-cubes\"><\/i><\/div>\n            <div>\n              <h4 class=\"text-xs font-bold text-white uppercase tracking-wider\">Multi-Platform<\/h4>\n              <p class=\"text-[11px] text-brand-textMuted mt-1\">WordPress, Brilliant Directory, Shopify & Wix.<\/p>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n        <!-- Consultation Call to Action Link -->\n        <div class=\"pt-4\">\n          <a href=\"mailto:jim@webmatrixshub.com?subject=Consultation%20Inquiry%20-%20Webmatrixs&body=Hello%20Jim%2C%20I%20would%20like%20to%20schedule%20a%20project%20consultation%20to%20discuss%20our%20website%20requirements.\" \n             class=\"inline-flex items-center justify-center gap-2 px-6 py-3.5 bg-brand-accent text-brand-black text-xs font-extrabold uppercase tracking-wider rounded-lg hover:bg-brand-accentHover transition-all duration-300 shadow-[0_0_15px_rgba(140,230,41,0.2)] hover:shadow-[0_0_25px_rgba(140,230,41,0.45)]\">\n            Schedule Project Call <i class=\"fa-solid fa-arrow-right text-[10px]\"><\/i>\n          <\/a>\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a16cadc e-con-full e-flex e-con e-parent\" data-id=\"a16cadc\" data-element_type=\"container\" data-e-type=\"container\" id=\"services\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b233049 elementor-widget elementor-widget-html\" data-id=\"b233049\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= CORE SERVICES SECTION ================= -->\n<section id=\"services\" class=\"max-w-7xl mx-auto px-6 py-20 space-y-6 relative z-10 select-none\">\n  \n  <!-- 3D Click-to-Flip Card CSS -->\n  <style>\n    \/* Perspective wrapper for 3D flip card *\/\n    .flip-card {\n      perspective: 1000px;\n    }\n    .flip-card-inner {\n      position: relative;\n      width: 100%;\n      height: 100%;\n      text-align: left;\n      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);\n      transform-style: preserve-3d;\n    }\n    \n    \/* Toggle state triggered strictly by Javascript on click *\/\n    .flip-card-inner.flipped {\n      transform: rotateY(180deg);\n    }\n    \n    \/* Flip card faces *\/\n    .flip-card-front, .flip-card-back {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n      -webkit-backface-visibility: hidden;\n      backface-visibility: hidden;\n      border-radius: 12px;\n      overflow: hidden;\n    }\n    \/* Front face styling *\/\n    .flip-card-front {\n      background-color: #0C0C0E;\n      border: 1px solid #1F1F24;\n      z-index: 2;\n      transform: rotateY(0deg);\n      transition: border-color 0.3s ease;\n    }\n    .flip-card:hover .flip-card-front {\n      border-color: rgba(140, 230, 41, 0.3); \/* Subtle green glow on hover *\/\n    }\n    \/* Back face styling *\/\n    .flip-card-back {\n      background-color: #0C0C0E;\n      border: 1px solid #8CE629; \n      transform: rotateY(180deg);\n    }\n    \/* Mobile click highlight resets *\/\n    .back-btn-action, .flip-card {\n      -webkit-tap-highlight-color: transparent !important;\n      outline: none !important;\n    }\n  <\/style>\n\n  <!-- Section Title -->\n  <div class=\"text-center max-w-lg mx-auto space-y-3\">\n    <span class=\"text-xs font-semibold tracking-widest text-brand-accent uppercase\">Expertise Fields<\/span>\n    <h2 class=\"text-2xl sm:text-3xl font-extrabold text-white uppercase tracking-wide\">Our Services<\/h2>\n    <p class=\"text-brand-textMuted text-xs sm:text-sm\">Click any service card or its \"Order Now\" button to configure your project scope and contact Jim.<\/p>\n  <\/div>\n\n  <!-- Symmetrical Grid of Click-to-Flip Cards (Height locked to h-[360px] to preserve vertical alignment) -->\n  <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n    \n    <!-- Service 1: WordPress Development (Fiverr Alternate) -->\n    <div class=\"flip-card h-[360px] w-full cursor-pointer\" onclick=\"toggleFlip(this)\">\n      <div class=\"flip-card-inner\">\n        <!-- Front Face -->\n        <div class=\"flip-card-front p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4\">\n            <div class=\"w-10 h-10 bg-brand-accent\/10 border border-brand-accent\/20 rounded-lg flex items-center justify-center text-brand-accent text-lg\">\n              <i class=\"fa-brands fa-wordpress\"><\/i>\n            <\/div>\n            <h3 class=\"text-lg font-bold text-white uppercase tracking-tight\">WordPress Development<\/h3>\n            <p class=\"text-brand-textMuted text-xs sm:text-sm leading-relaxed\">\n              Custom theme layouts, secure plugin configurations, and real estate IDX\/MLS listings integration built on modern WordPress systems.\n            <\/p>\n          <\/div>\n          <!-- Front-face Order Now button -->\n          <button class=\"w-full py-2.5 bg-transparent border border-brand-accent\/40 text-brand-accent hover:bg-brand-accent hover:text-brand-black transition-colors duration-300 text-xs font-bold uppercase tracking-wider rounded-lg\">\n            Order WordPress <i class=\"fa-solid fa-arrow-right text-[10px] ml-1\"><\/i>\n          <\/button>\n        <\/div>\n        <!-- Back Face -->\n        <div class=\"flip-card-back p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4 w-full\">\n            <h4 class=\"text-sm font-bold text-white uppercase tracking-wider\">WordPress Setup<\/h4>\n            <p class=\"text-brand-textMuted text-xs leading-relaxed\">Custom theme architectures, IDX listings integrations, and responsive structures built for conversions.<\/p>\n            <div class=\"flex flex-col gap-2.5 w-full pt-1\">\n              <!-- WhatsApp -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/wa.me\/2349138858007?text=Hi%20Jim%2C%20I%20need%20your%20help%20to%20build%20my%20website%2C%20redesign%2C%20website%2C%20design%20logo%20etc..\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-brand-accent text-brand-black text-[10px] font-bold uppercase tracking-wider rounded-lg flex items-center justify-center gap-2 hover:bg-brand-accentHover transition-colors\">\n                <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> WhatsApp Custom Query\n              <\/a>\n              <!-- Email -->\n              <a onclick=\"event.stopPropagation()\" href=\"mailto:jim@webmatrixshub.com?subject=WordPress%20Development%20Inquiry%20-%20Webmatrixs&body=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20WordPress%20Development%20services.\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-white\/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-lg flex items-center justify-center gap-2 hover:border-brand-accent hover:text-brand-accent transition-colors\">\n                <i class=\"fa-solid fa-envelope text-sm\"><\/i> Mail Direct Offer\n              <\/a>\n              <!-- Fiverr -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/www.fiverr.com\/s\/WERz1wL\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-brand-accent text-brand-accent text-[10px] font-bold uppercase tracking-wider rounded-lg flex items-center justify-center gap-2 hover:bg-brand-accent hover:text-brand-black transition-all duration-300\">\n                <i class=\"fa-solid fa-bolt text-sm\"><\/i> Fiverr Secure Checkout\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Service 2: Brilliiant Directory (Upwork Alternate) -->\n    <div class=\"flip-card h-[360px] w-full cursor-pointer\" onclick=\"toggleFlip(this)\">\n      <div class=\"flip-card-inner\">\n        <!-- Front Face -->\n        <div class=\"flip-card-front p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4\">\n            <div class=\"w-10 h-10 bg-brand-accent\/10 border border-brand-accent\/20 rounded-lg flex items-center justify-center text-brand-accent text-lg\">\n              <i class=\"fa-solid fa-database\"><\/i>\n            <\/div>\n            <h3 class=\"text-lg font-bold text-white uppercase tracking-tight\">Brilliiant Directory<\/h3>\n            <p class=\"text-brand-textMuted text-xs sm:text-sm leading-relaxed\">\n              Setup, design, and customization of professional listing portals, niche business databases, search directories, and membership systems.\n            <\/p>\n          <\/div>\n          <!-- Front face button -->\n          <button class=\"w-full py-2.5 bg-transparent border border-brand-accent\/40 text-brand-accent hover:bg-brand-accent hover:text-brand-black transition-colors duration-300 text-xs font-bold uppercase tracking-wider rounded-lg\">\n            Order Directory <i class=\"fa-solid fa-arrow-right text-[10px] ml-1\"><\/i>\n          <\/button>\n        <\/div>\n        <!-- Back Face -->\n        <div class=\"flip-card-back p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4 w-full\">\n            <h4 class=\"text-sm font-bold text-white uppercase tracking-wider\">Directories Setup<\/h4>\n            <p class=\"text-brand-textMuted text-xs leading-relaxed\">Monetized listing directories, localized business indexes, and searchable member databases.<\/p>\n            <div class=\"flex flex-col gap-2.5 w-full pt-1\">\n              <!-- WhatsApp -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/wa.me\/2349138858007?text=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20Brilliant%20Directory%20services.\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-brand-accent text-brand-black text-[10px] font-bold uppercase tracking-wider rounded-lg flex items-center justify-center gap-2 hover:bg-brand-accentHover transition-colors\">\n                <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> WhatsApp Custom Query\n              <\/a>\n              <!-- Email -->\n              <a onclick=\"event.stopPropagation()\" href=\"mailto:jim@webmatrixshub.com?subject=Brilliant%20Directory%20Inquiry%20-%20Webmatrixs&body=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20Brilliant%20Directory%20services.\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-white\/20 text-white text-[10px] font-bold uppercase tracking-wider rounded-lg flex items-center justify-center gap-2 hover:border-brand-accent hover:text-brand-accent transition-colors\">\n                <i class=\"fa-solid fa-envelope text-sm\"><\/i> Mail Direct Offer\n              <\/a>\n              <!-- Upwork -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/www.upwork.com\/freelancers\/~016ad1f46e822e160e?mp_source=share\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-brand-accent text-brand-accent text-[10px] font-bold uppercase tracking-wider rounded-lg flex items-center justify-center gap-2 hover:bg-brand-accent hover:text-brand-black transition-all duration-300\">\n                <i class=\"fa-brands fa-upwork text-sm\"><\/i> Upwork Escrow Hire\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Service 3: UI\/UX Design (Fiverr Alternate) -->\n    <div class=\"flip-card h-[360px] w-full cursor-pointer\" onclick=\"toggleFlip(this)\">\n      <div class=\"flip-card-inner\">\n        <!-- Front Face -->\n        <div class=\"flip-card-front p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4\">\n            <div class=\"w-10 h-10 bg-brand-accent\/10 border border-brand-accent\/20 rounded-lg flex items-center justify-center text-brand-accent text-lg\">\n              <i class=\"fa-solid fa-palette\"><\/i>\n            <\/div>\n            <h3 class=\"text-lg font-bold text-white uppercase tracking-tight\">UI\/UX Design<\/h3>\n            <p class=\"text-brand-textMuted text-xs sm:text-sm leading-relaxed\">\n              Designing clean wireframes, high-fidelity prototypes, and customer journey maps focused on user conversions and modern design standards.\n            <\/p>\n          <\/div>\n          <!-- Front face button -->\n          <button class=\"w-full py-2.5 bg-transparent border border-brand-accent\/40 text-brand-accent hover:bg-brand-accent hover:text-brand-black transition-colors duration-300 text-xs font-bold uppercase tracking-wider rounded-lg\">\n            Order UI\/UX Design <i class=\"fa-solid fa-arrow-right text-[10px] ml-1\"><\/i>\n          <\/button>\n        <\/div>\n        <!-- Back Face -->\n        <div class=\"flip-card-back p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4 w-full\">\n            <h4 class=\"text-sm font-bold text-white uppercase tracking-wider\">UI\/UX Interface Design<\/h4>\n            <p class=\"text-brand-textMuted text-xs leading-relaxed\">Wireframes and custom graphic mockups built to streamline your interface standards.<\/p>\n            <div class=\"flex flex-col gap-2.5 w-full pt-1\">\n              <!-- WhatsApp -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/wa.me\/2349138858007?text=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20UI\/UX%20Design%20services.\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-brand-accent text-brand-black flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg\">\n                <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> WhatsApp Custom Query\n              <\/a>\n              <!-- Email -->\n              <a onclick=\"event.stopPropagation()\" href=\"mailto:jim@webmatrixshub.com?subject=UI\/UX%20Design%20Inquiry%20-%20Webmatrixs&body=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20UI\/UX%20Design%20services.\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-white\/20 text-white flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:border-brand-accent hover:text-brand-accent transition-colors\">\n                <i class=\"fa-solid fa-envelope text-sm\"><\/i> Mail Direct Offer\n              <\/a>\n              <!-- Fiverr -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/www.fiverr.com\/s\/WERz1wL\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-brand-accent text-brand-accent flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:bg-brand-accent hover:text-brand-black transition-colors\">\n                <i class=\"fa-solid fa-bolt text-sm\"><\/i> Order on Fiverr\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Service 4: SEO (Upwork Alternate) -->\n    <div class=\"flip-card h-[360px] w-full cursor-pointer\" onclick=\"toggleFlip(this)\">\n      <div class=\"flip-card-inner\">\n        <!-- Front Face -->\n        <div class=\"flip-card-front p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4\">\n            <div class=\"w-10 h-10 bg-brand-accent\/10 border border-brand-accent\/20 rounded-lg flex items-center justify-center text-brand-accent text-lg\">\n              <i class=\"fa-solid fa-chart-line\"><\/i>\n            <\/div>\n            <h3 class=\"text-lg font-bold text-white uppercase tracking-tight\">SEO<\/h3>\n            <p class=\"text-brand-textMuted text-xs sm:text-sm leading-relaxed\">\n              In-depth technical audits, schema integrations, metadata structures, and search engine optimization to secure organic visibility.\n            <\/p>\n          <\/div>\n          <!-- Front face button -->\n          <button class=\"w-full py-2.5 bg-transparent border border-brand-accent\/40 text-brand-accent hover:bg-brand-accent hover:text-brand-black transition-colors duration-300 text-xs font-bold uppercase tracking-wider rounded-lg\">\n            Order SEO Setup <i class=\"fa-solid fa-arrow-right text-[10px] ml-1\"><\/i>\n          <\/button>\n        <\/div>\n        <!-- Back Face -->\n        <div class=\"flip-card-back p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4 w-full\">\n            <h4 class=\"text-sm font-bold text-white uppercase tracking-wider\">Search Optimization<\/h4>\n            <p class=\"text-brand-textMuted text-xs leading-relaxed\">Boost your organic keyword indexing with proper semantic schema architectures.<\/p>\n            <div class=\"flex flex-col gap-2.5 w-full pt-1\">\n              <!-- WhatsApp -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/wa.me\/2349138858007?text=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20SEO%20services.\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-brand-accent text-brand-black flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg\">\n                <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> WhatsApp Custom Query\n              <\/a>\n              <!-- Email -->\n              <a onclick=\"event.stopPropagation()\" href=\"mailto:jim@webmatrixshub.com?subject=SEO%20Optimization%20Inquiry%20-%20Webmatrixs&body=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20SEO%20services.\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-white\/20 text-white flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:border-brand-accent hover:text-brand-accent transition-colors\">\n                <i class=\"fa-solid fa-envelope text-sm\"><\/i> Mail Direct Offer\n              <\/a>\n              <!-- Upwork -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/www.upwork.com\/freelancers\/~016ad1f46e822e160e?mp_source=share\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-brand-accent text-brand-accent flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:bg-brand-accent hover:text-brand-black transition-colors\">\n                <i class=\"fa-brands fa-upwork text-sm\"><\/i> Order on Upwork\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Service 5: Logo & Fliers Design (Fiverr Alternate) -->\n    <div class=\"flip-card h-[360px] w-full cursor-pointer\" onclick=\"toggleFlip(this)\">\n      <div class=\"flip-card-inner\">\n        <!-- Front Face -->\n        <div class=\"flip-card-front p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4\">\n            <div class=\"w-10 h-10 bg-brand-accent\/10 border border-brand-accent\/20 rounded-lg flex items-center justify-center text-brand-accent text-lg\">\n              <i class=\"fa-solid fa-bezier-curve\"><\/i>\n            <\/div>\n            <h3 class=\"text-lg font-bold text-white uppercase tracking-tight\">Brand & Logo Design<\/h3>\n            <p class=\"text-brand-textMuted text-xs sm:text-sm leading-relaxed\">\n              Custom high-resolution business graphics, marketing flyers, modern brand aesthetics, and cohesive logo design assets.\n            <\/p>\n          <\/div>\n          <!-- Front face button -->\n          <button class=\"w-full py-2.5 bg-transparent border border-brand-accent\/40 text-brand-accent hover:bg-brand-accent hover:text-brand-black transition-colors duration-300 text-xs font-bold uppercase tracking-wider rounded-lg\">\n            Order Logo & Flier <i class=\"fa-solid fa-arrow-right text-[10px] ml-1\"><\/i>\n          <\/button>\n        <\/div>\n        <!-- Back Face -->\n        <div class=\"flip-card-back p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4 w-full\">\n            <h4 class=\"text-sm font-bold text-white uppercase tracking-wider\">Brand Design<\/h4>\n            <p class=\"text-brand-textMuted text-xs leading-relaxed\">Establish your company with unique logo setups and visual assets.<\/p>\n            <div class=\"flex flex-col gap-2.5 w-full pt-1\">\n              <!-- WhatsApp -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/wa.me\/2349138858007?text=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20Logo%20%26%20Fliers%20Design%20services.\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-brand-accent text-brand-black flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg\">\n                <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> WhatsApp Custom Query\n              <\/a>\n              <!-- Email -->\n              <a onclick=\"event.stopPropagation()\" href=\"mailto:jim@webmatrixshub.com?subject=Brand%20Design%20Inquiry%20-%20Webmatrixs&body=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20Logo%20%26%20Fliers%20Design%20services.\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-white\/20 text-white flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:border-brand-accent hover:text-brand-accent transition-colors\">\n                <i class=\"fa-solid fa-envelope text-sm\"><\/i> Mail Direct Offer\n              <\/a>\n              <!-- Fiverr -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/www.fiverr.com\/s\/WERz1wL\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-brand-accent text-brand-accent flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:bg-brand-accent hover:text-brand-black transition-colors\">\n                <i class=\"fa-solid fa-bolt text-sm\"><\/i> Order on Fiverr\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- Service 6: Social Media Marketing\/Adverts (Upwork Alternate) -->\n    <div class=\"flip-card h-[360px] w-full cursor-pointer\" onclick=\"toggleFlip(this)\">\n      <div class=\"flip-card-inner\">\n        <!-- Front Face -->\n        <div class=\"flip-card-front p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4\">\n            <div class=\"w-10 h-10 bg-brand-accent\/10 border border-brand-accent\/20 rounded-lg flex items-center justify-center text-brand-accent text-lg\">\n              <i class=\"fa-solid fa-bullseye\"><\/i>\n            <\/div>\n            <h3 class=\"text-lg font-bold text-white uppercase tracking-tight\">Social Media Marketing<\/h3>\n            <p class=\"text-brand-textMuted text-xs sm:text-sm leading-relaxed\">\n              Implementing targeted advertising frameworks, campaign setups, and social media promotions aimed at driving traffic directly to your website.\n            <\/p>\n          <\/div>\n          <!-- Front face button -->\n          <button class=\"w-full py-2.5 bg-transparent border border-brand-accent\/40 text-brand-accent hover:bg-brand-accent hover:text-brand-black transition-colors duration-300 text-xs font-bold uppercase tracking-wider rounded-lg\">\n            Order Adverts <i class=\"fa-solid fa-arrow-right text-[10px] ml-1\"><\/i>\n          <\/button>\n        <\/div>\n        <!-- Back Face -->\n        <div class=\"flip-card-back p-8 flex flex-col justify-between\">\n          <div class=\"space-y-4 w-full\">\n            <h4 class=\"text-sm font-bold text-white uppercase tracking-wider\">Campaign Marketing<\/h4>\n            <p class=\"text-brand-textMuted text-xs leading-relaxed\">Drive qualified prospects straight into your sales pipeline with structured advertisement campaigns.<\/p>\n            <div class=\"flex flex-col gap-2.5 w-full pt-1\">\n              <!-- WhatsApp -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/wa.me\/2349138858007?text=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20Social%20Media%20Marketing%20%26%20Adverts%20services.\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-brand-accent text-brand-black flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg\">\n                <i class=\"fa-brands fa-whatsapp text-sm\"><\/i> WhatsApp Custom Query\n              <\/a>\n              <!-- Email -->\n              <a onclick=\"event.stopPropagation()\" href=\"mailto:jim@webmatrixshub.com?subject=Social%20Media%20Campaign%20Inquiry%20-%20Webmatrixs&body=Hello%20Jim%2C%20I%20would%20like%20to%20hire%20you%20for%20Social%20Media%20Marketing%20%26%20Adverts%20services.\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-white\/20 text-white flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:border-brand-accent hover:text-brand-accent transition-colors\">\n                <i class=\"fa-solid fa-envelope text-sm\"><\/i> Mail Direct Offer\n              <\/a>\n              <!-- Upwork -->\n              <a onclick=\"event.stopPropagation()\" href=\"https:\/\/www.upwork.com\/freelancers\/~016ad1f46e822e160e?mp_source=share\" target=\"_blank\" class=\"back-btn-action w-full py-2.5 bg-transparent border border-brand-accent text-brand-accent flex items-center justify-center gap-2 text-[10px] font-bold uppercase tracking-wider rounded-lg hover:bg-brand-accent hover:text-brand-black transition-colors\">\n                <i class=\"fa-brands fa-upwork text-sm\"><\/i> Order on Upwork\n              <\/a>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- Click-to-Flip Javascript handler with auto-unflip logic -->\n<script>\n  function toggleFlip(card) {\n    const inner = card.querySelector('.flip-card-inner');\n    if (!inner) return;\n\n    \/\/ Check if the clicked card is already flipped\n    const isCurrentlyFlipped = inner.classList.contains('flipped');\n\n    \/\/ Find all other flipped card elements and flip them back\n    const allFlipped = document.querySelectorAll('.flip-card-inner.flipped');\n    allFlipped.forEach(otherInner => {\n      otherInner.classList.remove('flipped');\n    });\n\n    \/\/ Flip the clicked card only if it was previously facing front\n    if (!isCurrentlyFlipped) {\n      inner.classList.add('flipped');\n    }\n  }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5701874 e-con-full e-flex e-con e-parent\" data-id=\"5701874\" data-element_type=\"container\" data-e-type=\"container\" id=\"contact\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d8b514 elementor-widget elementor-widget-html\" data-id=\"4d8b514\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= CONTACT SECTION ================= -->\n<section id=\"contact\" class=\"relative bg-brand-black py-20 overflow-hidden  z-10 select-none\">\n  \n  <!-- Back ambient glowing orb -->\n  <div class=\"absolute w-[450px] h-[450px] glowing-bg bottom-12 right-1\/4 pointer-events-none opacity-30\"><\/div>\n\n  <div class=\"max-w-7xl mx-auto px-6 sm:px-8 relative z-10\">\n    <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-start\">\n      \n      <!-- LEFT COLUMN: Channel Indicators & Testimonial (Spans 5 Columns) -->\n      <div class=\"lg:col-span-5 space-y-8 lg:sticky lg:top-28\">\n        \n        <div class=\"space-y-4\">\n          <span class=\"inline-flex items-center gap-2 px-3 py-1 bg-brand-accent\/10 border border-brand-accent\/20 rounded-full text-brand-accent text-[10px] font-bold tracking-widest uppercase\">\n            <span class=\"w-1.5 h-1.5 bg-brand-accent rounded-full animate-pulse\"><\/span> Initiate Project\n          <\/span>\n          <h2 class=\"text-3xl sm:text-4xl font-extrabold text-white uppercase tracking-tight leading-tight\">\n            Let's build something <br> <span class=\"gradient-text\">Exceptional<\/span>\n          <\/h2>\n          <p class=\"text-brand-textMuted text-xs sm:text-sm leading-relaxed max-w-md\">\n            I respond quickly to project inquiries. Reach out to coordinate execution timelines, technical requirements, or request active system portfolios.\n          <\/p>\n        <\/div>\n\n        <!-- Channel Links Block -->\n        <div class=\"space-y-3.5\">\n          \n          <!-- Direct Email Card -->\n          <a href=\"mailto:jim@webmatrixshub.com?subject=Project%20Inquiry%20-%20Webmatrixs\" \n             class=\"back-btn-action flex items-center gap-4 bg-brand-card border border-brand-border hover:border-brand-accent\/30 p-4 rounded-xl transition-all duration-300\">\n            <div class=\"w-10 h-10 bg-brand-accent\/10 border border-brand-accent\/20 rounded-lg flex items-center justify-center text-brand-accent text-sm shrink-0\">\n              <i class=\"fa-solid fa-envelope\"><\/i>\n            <\/div>\n            <div>\n              <h4 class=\"text-[10px] font-bold text-brand-textMuted uppercase tracking-wider\">Direct Email<\/h4>\n              <p class=\"text-sm font-extrabold text-white mt-0.5 hover:text-brand-accent transition-colors\">jim@webmatrixshub.com<\/p>\n            <\/div>\n          <\/a>\n\n          <!-- WhatsApp Channel Card -->\n          <a href=\"https:\/\/wa.me\/2349138858007?text=Hi%20Jim%2C%20I%20need%20your%20help%20to%20build%20my%20website%2C%20redesign%2C%20website%2C%20design%20logo%20etc..\" \n             target=\"_blank\"\n             class=\"back-btn-action flex items-center gap-4 bg-brand-card border border-brand-border hover:border-brand-accent\/30 p-4 rounded-xl transition-all duration-300\">\n            <div class=\"w-10 h-10 bg-brand-accent\/10 border border-brand-accent\/20 rounded-lg flex items-center justify-center text-brand-accent text-sm shrink-0\">\n              <i class=\"fa-brands fa-whatsapp text-base\"><\/i>\n            <\/div>\n            <div>\n              <h4 class=\"text-[10px] font-bold text-brand-textMuted uppercase tracking-wider\">WhatsApp Line<\/h4>\n              <p class=\"text-sm font-extrabold text-white mt-0.5 hover:text-brand-accent transition-colors\">+234 913 885 8007<\/p>\n            <\/div>\n          <\/a>\n\n        <\/div>\n\n        <!-- Social Proof Widget -->\n        <div class=\"bg-brand-card\/40 border border-brand-border\/60 p-6 rounded-xl space-y-4\">\n          <div class=\"flex text-amber-500 gap-1 text-[10px]\">\n            <i class=\"fa-solid fa-star\"><\/i>\n            <i class=\"fa-solid fa-star\"><\/i>\n            <i class=\"fa-solid fa-star\"><\/i>\n            <i class=\"fa-solid fa-star\"><\/i>\n            <i class=\"fa-solid fa-star\"><\/i>\n          <\/div>\n          <p class=\"text-brand-textMuted text-xs italic leading-relaxed\">\n            \"Jim is such a gem! He is very responsive and went above and beyond to ensure that everything was handled appropriately. I feel more confident about my business growing now that I have a professional website.\"\n          <\/p>\n          <span class=\"block text-[9px] font-bold text-white uppercase tracking-widest\">\u2014 elinoel93, United States<\/span>\n        <\/div>\n\n      <\/div>\n\n      <!-- RIGHT COLUMN: Highly Qualified Lead Capture Form (Spans 7 Columns) -->\n      <div class=\"lg:col-span-7 bg-brand-card border border-brand-border p-8 sm:p-10 rounded-2xl shadow-xl relative\">\n        <form class=\"space-y-5\" action=\"#\" method=\"POST\">\n          \n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-5\">\n            <!-- Full Name Input -->\n            <div class=\"space-y-2\">\n              <label class=\"block text-[10px] uppercase font-bold text-brand-textMuted tracking-wider\">Full Name<\/label>\n              <input type=\"text\" name=\"client_name\" required placeholder=\"John Doe\" \n                     class=\"w-full bg-brand-black border border-brand-border focus:border-brand-accent focus:ring-1 focus:ring-brand-accent rounded-lg px-4 py-3 text-sm text-white focus:outline-none transition-colors\">\n            <\/div>\n            \n            <!-- Email Address Input -->\n            <div class=\"space-y-2\">\n              <label class=\"block text-[10px] uppercase font-bold text-brand-textMuted tracking-wider\">Email Address<\/label>\n              <input type=\"email\" name=\"client_email\" required placeholder=\"john@example.com\" \n                     class=\"w-full bg-brand-black border border-brand-border focus:border-brand-accent focus:ring-1 focus:ring-brand-accent rounded-lg px-4 py-3 text-sm text-white focus:outline-none transition-colors\">\n            <\/div>\n          <\/div>\n\n          <!-- Project Classification Dropdown Selection -->\n          <div class=\"space-y-2\">\n            <label class=\"block text-[10px] uppercase font-bold text-brand-textMuted tracking-wider\">Project Focus<\/label>\n            <select name=\"project_classification\" required\n                    class=\"w-full bg-brand-black border border-brand-border focus:border-brand-accent focus:ring-1 focus:ring-brand-accent rounded-lg px-4 py-3 text-sm text-neutral-300 focus:outline-none transition-colors\">\n              <option value=\"\" disabled selected class=\"text-neutral-500\">Select relevant expertise...<\/option>\n              <option value=\"WordPress Development\" class=\"bg-brand-card\">WordPress Web Development<\/option>\n              <option value=\"Brilliant Directory\" class=\"bg-brand-card\">Brilliiant Directory Setups<\/option>\n              <option value=\"UI\/UX Design\" class=\"bg-brand-card\">UI\/UX Layout Design<\/option>\n              <option value=\"SEO\" class=\"bg-brand-card\">Search Engine Optimization (SEO)<\/option>\n              <option value=\"Logo Design\" class=\"bg-brand-card\">Logo & Fliers Brand Asset Design<\/option>\n              <option value=\"Social Ads\" class=\"bg-brand-card\">Social Media Marketing\/Adverts<\/option>\n            <\/select>\n          <\/div>\n\n          <!-- Project Timeline Selector -->\n          <div class=\"space-y-2\">\n            <label class=\"block text-[10px] uppercase font-bold text-brand-textMuted tracking-wider\">Estimated Schedule<\/label>\n            <select name=\"project_timeline\" required\n                    class=\"w-full bg-brand-black border border-brand-border focus:border-brand-accent focus:ring-1 focus:ring-brand-accent rounded-lg px-4 py-3 text-sm text-neutral-300 focus:outline-none transition-colors\">\n              <option value=\"\" disabled selected class=\"text-neutral-500\">Select target timeline...<\/option>\n              <option value=\"Immediate\" class=\"bg-brand-card\">Immediate (Less than 2 weeks)<\/option>\n              <option value=\"Standard\" class=\"bg-brand-card\">Standard (2 to 4 weeks)<\/option>\n              <option value=\"Flexible\" class=\"bg-brand-card\">Flexible (1 month+ schedule)<\/option>\n            <\/select>\n          <\/div>\n\n          <!-- Message Details Textarea -->\n          <div class=\"space-y-2\">\n            <label class=\"block text-[10px] uppercase font-bold text-brand-textMuted tracking-wider\">Project parameters<\/label>\n            <textarea name=\"client_message\" rows=\"5\" required placeholder=\"Describe your website goals, design parameters, and target audiences...\" \n                      class=\"w-full bg-brand-black border border-brand-border focus:border-brand-accent focus:ring-1 focus:ring-brand-accent rounded-lg px-4 py-3 text-sm text-white focus:outline-none transition-colors\"><\/textarea>\n          <\/div>\n\n          <!-- Big Solid Submit Button -->\n          <button type=\"submit\" \n                  class=\"back-btn-action w-full py-4 bg-brand-accent text-brand-black font-extrabold uppercase text-xs tracking-wider rounded-lg hover:bg-brand-accentHover transition-all duration-300 shadow-[0_0_15px_rgba(140,230,41,0.2)] hover:shadow-[0_0_25px_rgba(140,230,41,0.45)]\">\n            Send Inquiry Message <i class=\"fa-solid fa-paper-plane text-[10px] ml-1\"><\/i>\n          <\/button>\n\n        <\/form>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6dff899 e-con-full e-flex e-con e-parent\" data-id=\"6dff899\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2fbe6de elementor-widget elementor-widget-html\" data-id=\"2fbe6de\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= CLIENT TESTIMONIALS SLIDER ================= -->\n<section id=\"testimonials\" class=\"relative bg-brand-black py-20 border-t border-brand-border\/60 overflow-hidden z-10 select-none\">\n  \n  <!-- Back ambient glowing orb -->\n  <div class=\"absolute w-[450px] h-[450px] glowing-bg bottom-12 left-1\/2 -translate-x-1\/2 pointer-events-none opacity-20\"><\/div>\n\n  <style>\n    \/* Clean transition easing for slider container changes *\/\n    #testimonial-card-container {\n      transition: opacity 0.3s ease, transform 0.3s ease;\n    }\n    \n    .testimonial-slide-transition {\n      opacity: 0;\n      transform: translateX(12px);\n    }\n\n    #testimonials-controls button,\n    .testimonial-redirect-btn {\n      -webkit-tap-highlight-color: transparent !important;\n      outline: none !important;\n      box-shadow: none !important;\n    }\n\n    \/* Target dropup menu properties for hardware-accelerated animations *\/\n    #reviews-dropdown-menu {\n      transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);\n    }\n  <\/style>\n\n  <div class=\"max-w-4xl mx-auto px-6 sm:px-8 relative z-10 space-y-12\">\n    \n    <!-- Centred Trust Header -->\n    <div class=\"flex flex-col items-center justify-center text-center space-y-4 max-w-2xl mx-auto pb-6\">\n      <span class=\"inline-flex items-center gap-2 px-3 py-1 bg-brand-accent\/10 border border-brand-accent\/20 rounded-full text-brand-accent text-[10px] font-bold tracking-widest uppercase\">\n        <span class=\"w-1.5 h-1.5 bg-brand-accent rounded-full animate-pulse\"><\/span> Trusted By Business Owners Globally\n      <\/span>\n      <h2 class=\"text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white uppercase tracking-tight\">\n        Client <span class=\"gradient-text\">Testimonials<\/span>\n      <\/h2>\n      <p class=\"text-brand-textMuted text-xs sm:text-sm leading-relaxed max-w-lg\">\n      Trusted by 100+ Clients Worldwide\nFrom the United States and Canada to the UK, Europe, Australia, and the Middle East, businesses rely on Jim Anthony to build high-performing websites and digital solutions that deliver real results.\n      <\/p>\n      \n      <!-- Fiverr Global Score Badge -->\n      <div class=\"flex flex-col sm:flex-row items-center gap-3 bg-brand-card border border-brand-border px-5 py-3 rounded-2xl mt-4\">\n        <div class=\"flex items-center gap-1.5\">\n          <span class=\"text-xl font-extrabold text-white\">4.9<\/span>\n          <div class=\"flex text-brand-accent gap-0.5 text-sm\">\n            <i class=\"fa-solid fa-star\"><\/i>\n            <i class=\"fa-solid fa-star\"><\/i>\n            <i class=\"fa-solid fa-star\"><\/i>\n            <i class=\"fa-solid fa-star\"><\/i>\n            <i class=\"fa-solid fa-star\"><\/i>\n          <\/div>\n        <\/div>\n        <span class=\"hidden sm:inline text-brand-border\">|<\/span>\n        <p class=\"text-xs text-brand-textMuted font-medium uppercase tracking-wider\">\n          4.9 Average Rating across 101 audited orders\n        <\/p>\n      <\/div>\n    <\/div>\n\n    <!-- Centralised Testimonial Frame (min-height prevents layout shifts on slide transition) -->\n    <div class=\"premium-card rounded-2xl p-8 sm:p-10 flex flex-col justify-between min-h-[300px] sm:min-h-[250px] relative\">\n      <!-- Quote decorative backdrop -->\n      <div class=\"absolute -top-2 -left-2 text-brand-accent\/5 text-8xl font-serif pointer-events-none select-none\">\u201c<\/div>\n      \n      <!-- Inside card transition container -->\n      <div id=\"testimonial-card-container\" class=\"space-y-6 flex-grow flex flex-col justify-between opacity-100 transform translate-x-0\">\n        \n        <div class=\"space-y-4\">\n          <!-- User Details and Ratings row -->\n          <div class=\"flex justify-between items-center w-full\">\n            <div class=\"flex items-center gap-3\">\n              <!-- Initial placeholder colored dynamic circle -->\n              <div id=\"testimonial-initial\" class=\"w-10 h-10 bg-brand-accent\/10 border border-brand-accent\/20 rounded-full flex items-center justify-center text-brand-accent font-extrabold text-sm uppercase\">R<\/div>\n              <div>\n                <h4 id=\"testimonial-author\" class=\"text-sm font-bold text-white tracking-wide\">romerojj<\/h4>\n                <p id=\"testimonial-country\" class=\"text-[9px] text-brand-textMuted uppercase tracking-wider font-semibold\">United States<\/p>\n              <\/div>\n            <\/div>\n            <!-- Star Count -->\n            <div id=\"testimonial-stars\" class=\"flex text-brand-accent gap-0.5 text-[9px] shrink-0\">\n              <i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i><i class=\"fa-solid fa-star\"><\/i>\n            <\/div>\n          <\/div>\n\n          <!-- Dynamic Quote Body -->\n          <p id=\"testimonial-quote\" class=\"text-brand-textMuted text-xs sm:text-sm md:text-base italic leading-relaxed pt-1\">\n            Loading checked reviews...\n          <\/p>\n        <\/div>\n\n        <!-- Custom Scope and Duration Tags Footer (Visual price display tags removed completely) -->\n        <div class=\"flex justify-between items-center pt-6 border-t border-brand-border\/40 mt-4 gap-2 shrink-0\">\n          <span id=\"testimonial-scope\" class=\"px-2.5 py-1 bg-brand-black border border-brand-border rounded-full text-[9px] text-brand-textMuted uppercase font-semibold\">WordPress Gigs<\/span>\n          <span id=\"testimonial-duration\" class=\"text-xs text-brand-textMuted uppercase tracking-wider font-semibold\">Duration: 11 days<\/span>\n        <\/div>\n\n      <\/div>\n    <\/div>\n\n    <!-- Left & Right Arrow Slider Navigation (with live dynamic counter) -->\n    <div id=\"testimonials-controls\" class=\"flex items-center justify-center gap-6 pt-2\">\n      <!-- Prev Arrow -->\n      <button onclick=\"prevTestimonial()\" class=\"w-10 h-10 border border-brand-border text-brand-textMuted rounded-full flex items-center justify-center hover:border-brand-accent hover:text-brand-accent transition-all duration-300\" aria-label=\"Previous testimonial\">\n        <i class=\"fa-solid fa-chevron-left text-xs\"><\/i>\n      <\/button>\n      \n      <!-- Live Ledger Counter -->\n      <span id=\"testimonial-counter\" class=\"text-xs font-semibold text-brand-textMuted uppercase tracking-widest\">\n        1 \/ 45\n      <\/span>\n      \n      <!-- Next Arrow -->\n      <button onclick=\"nextTestimonial()\" class=\"w-10 h-10 border border-brand-border text-brand-textMuted rounded-full flex items-center justify-center hover:border-brand-accent hover:text-brand-accent transition-all duration-300\" aria-label=\"Next testimonial\">\n        <i class=\"fa-solid fa-chevron-right text-xs\"><\/i>\n      <\/button>\n    <\/div>\n\n    <!-- Single Trigger Button with Toggle Dropup (Offsets and click overlays configured) -->\n    <div class=\"relative flex justify-center items-center pt-4 max-w-xs mx-auto\">\n      \n      <!-- Dropdown Trigger -->\n      <button id=\"reviews-dropdown-btn\" onclick=\"toggleReviewsDropdown(event)\" \n              class=\"testimonial-redirect-btn w-full px-5 py-3.5 border border-brand-accent text-brand-accent bg-transparent hover:bg-brand-accent hover:text-brand-black text-xs font-bold uppercase tracking-wider rounded-lg text-center transition-all duration-300 shadow-[0_0_12px_rgba(140,230,41,0.1)] hover:shadow-[0_0_22px_rgba(140,230,41,0.4)] flex items-center justify-center gap-2\">\n        View More Reviews <i id=\"dropdown-arrow\" class=\"fa-solid fa-chevron-up text-[10px] transition-transform duration-300\"><\/i>\n      <\/button>\n\n      <!-- Absolute Positioned Dropup Panel -->\n      <div id=\"reviews-dropdown-menu\" class=\"hidden absolute bottom-full mb-3 w-full bg-brand-card border border-brand-border rounded-xl shadow-2xl p-1.5 z-30 opacity-0 transform translate-y-2 scale-95 flex flex-col gap-0.5\">\n        \n        <!-- Fiverr Link -->\n        <a href=\"https:\/\/www.fiverr.com\/s\/WERz1wL\" target=\"_blank\" rel=\"noopener\" onclick=\"event.stopPropagation(); closeReviewsDropdown();\"\n           class=\"w-full px-4 py-3 rounded-lg text-left text-xs font-bold uppercase tracking-wider text-neutral-400 hover:text-white hover:bg-brand-accent\/15 transition-colors flex items-center gap-2.5\">\n          <i class=\"fa-solid fa-bolt text-brand-accent text-sm\"><\/i> View on Fiverr\n        <\/a>\n        \n        <!-- Upwork Link -->\n        <a href=\"https:\/\/www.upwork.com\/freelancers\/~016ad1f46e822e160e?mp_source=share\" target=\"_blank\" rel=\"noopener\" onclick=\"event.stopPropagation(); closeReviewsDropdown();\"\n           class=\"w-full px-4 py-3 rounded-lg text-left text-xs font-bold uppercase tracking-wider text-neutral-400 hover:text-white hover:bg-brand-accent\/15 transition-colors flex items-center gap-2.5\">\n          <i class=\"fa-brands fa-upwork text-[#14a800] text-sm\"><\/i> View on Upwork\n        <\/a>\n        \n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- Testimonial Slider & Dynamic Dropup Engine -->\n<script>\n  const testimonials = [\n    { author: \"romerojj\", country: \"United States\", initial: \"R\", rating: 5, price: \"$200 - $400\", duration: \"11 days\", scope: \"WordPress Site\", quote: \"Super happy with his service and attention to detail on the development of my Real Estate website. I will recommend him to anyone looking for a professional, modern website design. Thanks Jim.\" },\n    { author: \"romerojj\", country: \"United States\", initial: \"R\", rating: 5, price: \"$100 - $200\", duration: \"4 days\", scope: \"WordPress Web\", quote: \"I had an outstanding experience working with this web developer! From start to finish, he communicated clearly, professionally, and always on time. He truly understood my vision and turned it into a beautiful, functional website that exceeded my expectations. What impressed me the most was his attention.\" },\n    { author: \"saifbigdaddy\", country: \"United Arab Emirates\", initial: \"S\", rating: 5, price: \"$100 - $200\", duration: \"2 weeks\", scope: \"WordPress Developer\", quote: \"Excellent Work!\" },\n    { author: \"oredam\", country: \"United Kingdom\", initial: \"O\", rating: 5, price: \"Up to $50\", duration: \"7 days\", scope: \"WordPress Dev\", quote: \"I\u2019ve worked with Jim many times and he never disappoints. Fast delivery, very responsive and excellent quality.\" },\n    { author: \"oredam\", country: \"United Kingdom\", initial: \"O\", rating: 5, price: \"Up to $50\", duration: \"5 days\", scope: \"WordPress System\", quote: \"I came back because of the great experience I had before. Anthony\u2019s work is always consistent. He understands my ideas and brings them to life. Anthony pays attention to all details and makes changes quickly when asked.\" },\n    { author: \"oredam\", country: \"United Kingdom\", initial: \"O\", rating: 5, price: \"Up to $50\", duration: \"8 days\", scope: \"WordPress Custom\", quote: \"I had a good experience working with Anthony. The work was clear, well done and delivered on time. He is very professional and easy to work with. I would definitely order again. I appreciate the effort.\" },\n    { author: \"anneyapple\", country: \"United States\", initial: \"A\", rating: 5, price: \"Up to $50\", duration: \"5 days\", scope: \"WordPress Dev\", quote: \"Amazing work!\" },\n    { author: \"solom82738\", country: \"United States\", initial: \"S\", rating: 5, price: \"$50 - $100\", duration: \"2 days\", scope: \"WordPress Gigs\", quote: \"Very good service\" },\n    { author: \"kd1908\", country: \"United States\", initial: \"K\", rating: 5, price: \"$100 - $200\", duration: \"1 day\", scope: \"WordPress Dev\", quote: \"Thank you for your patience. We don\u2019t get Walmart to cooperate. I will circle back to get that completed.\" },\n    { author: \"shadaeharris6\", country: \"United States\", initial: \"S\", rating: 5, price: \"$100 - $200\", duration: \"5 days\", scope: \"WordPress Alignment\", quote: \"He was very professional and understanding, and I really like the fact that he pays attention to detail because I am a very detailed person and I like specific stuff and he delivered it exactly how I liked it!\" },\n    { author: \"shadaeharris6\", country: \"United States\", initial: \"S\", rating: 5, price: \"$200 - $400\", duration: \"9 days\", scope: \"WordPress Consultation\", quote: \"His response was very quick! I loved the work he did and he did everything I wanted and worked with me even though I didn\u2019t know much but because of his experience he knew what was right for me!!!\" },\n    { author: \"d456emstudio\", country: \"United States\", initial: \"D\", rating: 5, price: \"$50 - $100\", duration: \"7 days\", scope: \"WordPress Custom\", quote: \"Amazing work, will work with him again!\" },\n    { author: \"d456emstudio\", country: \"United States\", initial: \"D\", rating: 4, price: \"$50 - $100\", duration: \"10 days\", scope: \"WordPress Dev\", quote: \"Great to work with\" },\n    { author: \"anneyapple\", country: \"United States\", initial: \"A\", rating: 5, price: \"$200 - $400\", duration: \"10 days\", scope: \"WordPress Layout\", quote: \"Anthony exceeded my expectations in designing my website. He was polite, professional, and proactive, keeping communication clear and documentation thorough. His attention to detail and proactive approach improved functionality, user experience, and design. He consistently delivered high-quality work.\" },\n    { author: \"anneyapple\", country: \"United States\", initial: \"A\", rating: 5, price: \"$50 - $100\", duration: \"5 days\", scope: \"WordPress Iteration\", quote: \"Working with Anthony on my website was a great experience. His attention to detail brought my vision to life, exceeding my expectations. He was quick to make updates whenever needed, and his delivery time was always prompt. Anthony\u2019s professionalism and politeness made the process seamless.\" },\n    { author: \"elinoel93\", country: \"United States\", initial: \"E\", rating: 5, price: \"$50 - $100\", duration: \"13 days\", scope: \"WordPress Dev\", quote: \"This is my second time working with Anthony and he always goes above and beyond to deliver quality work. I will continue to work with him as new projects come in. I would definitely recommend him to anyone looking for great quality work and cost effective projects.\" },\n    { author: \"d456emstudio\", country: \"United States\", initial: \"D\", rating: 5, price: \"$50 - $100\", duration: \"7 days\", scope: \"WordPress Gigs\", quote: \"Great work\" },\n    { author: \"chic4u\", country: \"United States\", initial: \"C\", rating: 5, price: \"$200 - $400\", duration: \"2 days\", scope: \"WordPress Optimization\", quote: \"As always he did a great Job\" },\n    { author: \"iwhuff\", country: \"United States\", initial: \"I\", rating: 5, price: \"$100 - $200\", duration: \"8 days\", scope: \"WordPress Setup\", quote: \"Anthony was able to work with me to get the details of my website completed within 1 week, I am very satisfied with the results. I would definitely recommend.\" },\n    { author: \"saifbigdaddy\", country: \"United Arab Emirates\", initial: \"S\", rating: 5, price: \"$200 - $400\", duration: \"10 days\", scope: \"WordPress Gigs\", quote: \"It was good time working with Anthony!\" },\n    { author: \"saifbigdaddy\", country: \"United Arab Emirates\", initial: \"S\", rating: 5, price: \"Up to $50\", duration: \"6 days\", scope: \"WordPress Dev\", quote: \"It was great working with him.\" },\n    { author: \"jonathsk\", country: \"United States\", initial: \"J\", rating: 5, price: \"$100 - $200\", duration: \"8 days\", scope: \"WordPress Inquiries\", quote: \"Anthony was a pleasure to work with. He was extremely responsive and worked hard to understand my vision until I was completely satisfied. Pricing was fair. He also asked great questions to help deliver a quality product. He was also very knowledgeable in the area.\" },\n    { author: \"saifbigdaddy\", country: \"United Arab Emirates\", initial: \"S\", rating: 5, price: \"$200 - $400\", duration: \"2 weeks\", scope: \"WordPress Web\", quote: \"It was great working with Anthony.\" },\n    { author: \"perrynotary\", country: \"United States\", initial: \"P\", rating: 5, price: \"$100 - $200\", duration: \"9 days\", scope: \"WordPress Dev\", quote: \"Excellent.\" },\n    { author: \"raych2407\", country: \"United States\", initial: \"R\", rating: 5, price: \"Up to $50\", duration: \"4 days\", scope: \"WordPress Support\", quote: \"Once again Anthony delivered excellent work my go to person thank you so much\" },\n    { author: \"csanders342022\", country: \"United States\", initial: \"C\", rating: 5, price: \"$100 - $200\", duration: \"9 days\", scope: \"WordPress Dev\", quote: \"Great job over all\" },\n    { author: \"popballoons\", country: \"United Kingdom\", initial: \"P\", rating: 5, price: \"$200 - $400\", duration: \"2 weeks\", scope: \"WordPress Store\", quote: \"I was very happy with the service, he understood the brief and was excellent in suggesting more efficient ways for my site to operate. Anthony was very quick to respond to messages, the project was delivered on time and to a very high standard. I would work with Anthony again.\" },\n    { author: \"markesperti\", country: \"United States\", initial: \"M\", rating: 5, price: \"$50 - $100\", duration: \"9 days\", scope: \"WordPress Integration\", quote: \"Consistent, quality and quick work by Anthony, I'm pleased with his partnership.\" },\n    { author: \"chic4u\", country: \"United States\", initial: \"C\", rating: 5, price: \"$200 - $400\", duration: \"5 days\", scope: \"WordPress Dev\", quote: \"He's very knowledgeable and professional.\" },\n    { author: \"markesperti\", country: \"United States\", initial: \"M\", rating: 5, price: \"$200 - $400\", duration: \"8 days\", scope: \"WordPress Build\", quote: \"I'm impressed with Anthony's work and I will certainly use him again for future projects and updates!\" },\n    { author: \"elinoel93\", country: \"United States\", initial: \"E\", rating: 5, price: \"$100 - $200\", duration: \"5 days\", scope: \"WordPress Custom\", quote: \"Anthony is such a gem! He is very responsive and went above and beyond to ensure that everything was handled appropriately. I appreciate his level of communication and his work speaks for itself! The project that he helped me with is so neat, and very well detailed.\" },\n    { author: \"bilawalkhan1908\", country: \"Saudi Arabia\", initial: \"B\", rating: 4.7, price: \"$200 - $400\", duration: \"5 weeks\", scope: \"WordPress Dev\", quote: \"anthony you did a great job, you have great communication skills and very quick responsive , excellent command on your work , i would like to work with you for more my pending project. over all am very satisfied to work with you. thanks\" },\n    { author: \"brytt432\", country: \"United States\", initial: \"B\", rating: 5, price: \"$200 - $400\", duration: \"13 days\", scope: \"WordPress Launch\", quote: \"Anthony has been amazing!! Definitely will be my go to person! He was exactly what I needed to give my new business venture , a great kickstart!! Very easy to work with an understanding!! Im happy i booked with him and his team!\" },\n    { author: \"sjuster6710\", country: \"United States\", initial: \"S\", rating: 5, price: \"$100 - $200\", duration: \"6 days\", scope: \"WordPress System\", quote: \"I initially tried to build my own website myself and eventually reminded myself that this was not my expertise and that is where Anthony was able to tackle what was taking me months to understand, only a few days! I feel more confident about my business growing now.\" },\n    { author: \"sjuster6710\", country: \"United States\", initial: \"S\", rating: 5, price: \"$100 - $100\", duration: \"5 days\", scope: \"WordPress Build\", quote: \"Anthony was a delight to work with. Communication was seamless and best of all, he was patient with me. I would definitely consider booking him again to assist with my web design needs!\" },\n    { author: \"marketingpieces\", country: \"United States\", initial: \"M\", rating: 5, price: \"$100 - $200\", duration: \"7 days\", scope: \"WordPress Setup\", quote: \"Great work. Thank you.\" },\n    { author: \"raych2407\", country: \"United States\", initial: \"R\", rating: 5, price: \"$100 - $200\", duration: \"13 days\", scope: \"WordPress Dev\", quote: \"Anthony is amazing! He\u2019s a professional great communicator , always open to feedback. Thank you\" },\n    { author: \"ghettouser\", country: \"United States\", initial: \"G\", rating: 5, price: \"$50 - $100\", duration: \"3 days\", scope: \"WordPress Alignment\", quote: \"Anthony is the man. His work is exceptional.\" },\n    { author: \"ghettouser\", country: \"United States\", initial: \"G\", rating: 5, price: \"$50 - $100\", duration: \"3 days\", scope: \"WordPress Custom\", quote: \"Anthony went beyond my deepest expectation. He turn a good website into an outstanding website. I still can\u2019t believe the excellent job he did. Thank you Anthony.\" },\n    { author: \"raych2407\", country: \"United States\", initial: \"R\", rating: 5, price: \"Up to $50\", duration: \"3 days\", scope: \"WordPress Dev\", quote: \"Great experience thank you\" },\n    { author: \"csanders342022\", country: \"United States\", initial: \"C\", rating: 5, price: \"Up to $50\", duration: \"3 days\", scope: \"WordPress Gigs\", quote: \"Great great work\" },\n    { author: \"raych2407\", country: \"United States\", initial: \"R\", rating: 5, price: \"Up to $50\", duration: \"4 days\", scope: \"WordPress Custom\", quote: \"Excellent job thank you.\" },\n    { author: \"raych2407\", country: \"United States\", initial: \"R\", rating: 5, price: \"$100 - $200\", duration: \"2 weeks\", scope: \"WordPress Dev\", quote: \"Anthony was fantastic, professional, great communication and so patient with me. The site is top notch will collaborate again soon for sure. Thanks Anthony\" },\n    { author: \"leeri01\", country: \"United States\", initial: \"L\", rating: 5, price: \"$100 - $200\", duration: \"7 days\", scope: \"WordPress Setup\", quote: \"Anthony has been great. We had a few hiccups in the beginning. He communicated greatly until we got it all ironed out. My website is very professional. I can't wait to promote it.\" },\n    { author: \"divinedays\", country: \"United States\", initial: \"D\", rating: 5, price: \"$50 - $100\", duration: \"7 days\", scope: \"WordPress Dev\", quote: \"Anthony has given stellar service and outstanding work. I have used his company several times I recommend 10\/10\" }\n  ];\n\n  let currentTestimonialIndex = 0;\n  const totalTestimonialSlides = testimonials.length;\n\n  \/\/ regex helper to map and compare text ranges to accurate numeric values behind the scenes\n  function parseMaxPrice(priceStr) {\n    const numbers = priceStr.match(\/\\d+\/g);\n    if (!numbers) return 0;\n    return Math.max(...numbers.map(Number));\n  }\n\n  \/\/ Audited Sort: Sorts dynamically by rating descending, and price value descending (so the high-end 5-star items load first)\n  testimonials.sort((a, b) => {\n    if (b.rating !== a.rating) {\n      return b.rating - a.rating;\n    }\n    return parseMaxPrice(b.price) - parseMaxPrice(a.price);\n  });\n\n  \/\/ Smooth sliding card logic\n  function renderTestimonial(index) {\n    const container = document.getElementById(\"testimonial-card-container\");\n    const item = testimonials[index];\n\n    \/\/ Fade and translate slide\n    container.classList.add(\"testimonial-slide-transition\");\n\n    setTimeout(() => {\n      \/\/ Dynamic DOM injections (Liveness and rating tags fully preserved)\n      document.getElementById(\"testimonial-initial\").innerText = item.initial;\n      document.getElementById(\"testimonial-author\").innerText = item.author;\n      document.getElementById(\"testimonial-country\").innerText = item.country;\n      document.getElementById(\"testimonial-quote\").innerText = `\"${item.quote}\"`;\n      document.getElementById(\"testimonial-scope\").innerText = item.scope;\n      document.getElementById(\"testimonial-duration\").innerText = `Duration: ${item.duration}`;\n\n      \/\/ Update active green stars count\n      const starsDiv = document.getElementById(\"testimonial-stars\");\n      let starMarkup = \"\";\n      const integerStars = Math.floor(item.rating);\n      for (let i = 0; i < 5; i++) {\n        if (i < integerStars) {\n          starMarkup += `<i class=\"fa-solid fa-star\"><\/i>`;\n        } else if (i === integerStars && item.rating % 1 !== 0) {\n          starMarkup += `<i class=\"fa-solid fa-star-half-stroke\"><\/i>`;\n        } else {\n          starMarkup += `<i class=\"fa-regular fa-star\"><\/i>`;\n        }\n      }\n      starsDiv.innerHTML = starMarkup;\n\n      \/\/ Update manual dynamic slide ledger text\n      document.getElementById(\"testimonial-counter\").innerText = `${index + 1} \/ ${totalTestimonialSlides}`;\n\n      \/\/ Reset transitions\n      container.classList.remove(\"testimonial-slide-transition\");\n    }, 250);\n  }\n\n  function nextTestimonial() {\n    currentTestimonialIndex = (currentTestimonialIndex + 1) % totalTestimonialSlides;\n    renderTestimonial(currentTestimonialIndex);\n    resetTestimonialTimer();\n  }\n\n  function prevTestimonial() {\n    currentTestimonialIndex = (currentTestimonialIndex - 1 + totalTestimonialSlides) % totalTestimonialSlides;\n    renderTestimonial(currentTestimonialIndex);\n    resetTestimonialTimer();\n  }\n\n  \/\/ Dynamic automatic 6.5s swiping interval\n  let testimonialInterval = setInterval(autoSwipeTestimonial, 6500);\n\n  function autoSwipeTestimonial() {\n    currentTestimonialIndex = (currentTestimonialIndex + 1) % totalTestimonialSlides;\n    renderTestimonial(currentTestimonialIndex);\n  }\n\n  function resetTestimonialTimer() {\n    clearInterval(testimonialInterval);\n    testimonialInterval = setInterval(autoSwipeTestimonial, 6500);\n  }\n\n  \/\/ ================= DYNAMIC DROPUP OVERLAY ENGINE =================\n  function toggleReviewsDropdown(event) {\n    event.stopPropagation(); \/\/ Block bubbling to prevent instant close\n    const menu = document.getElementById(\"reviews-dropdown-menu\");\n    const arrow = document.getElementById(\"dropdown-arrow\");\n    if (!menu) return;\n\n    const isHidden = menu.classList.contains(\"hidden\");\n\n    if (isHidden) {\n      \/\/ Reveal menu container\n      menu.classList.remove(\"hidden\");\n      \/\/ Execute micro-offset translate transitions\n      setTimeout(() => {\n        menu.classList.remove(\"opacity-0\", \"translate-y-2\", \"scale-95\");\n        menu.classList.add(\"opacity-100\", \"translate-y-0\", \"scale-100\");\n      }, 10);\n      if (arrow) arrow.style.transform = \"rotate(180deg)\";\n    } else {\n      closeReviewsDropdown();\n    }\n  }\n\n  function closeReviewsDropdown() {\n    const menu = document.getElementById(\"reviews-dropdown-menu\");\n    const arrow = document.getElementById(\"dropdown-arrow\");\n    if (!menu || menu.classList.contains(\"hidden\")) return;\n\n    menu.classList.remove(\"opacity-100\", \"translate-y-0\", \"scale-100\");\n    menu.classList.add(\"opacity-0\", \"translate-y-2\", \"scale-95\");\n    if (arrow) arrow.style.transform = \"rotate(0deg)\";\n\n    \/\/ Stagger layout hiding until the exit transitions finish\n    setTimeout(() => {\n      menu.classList.add(\"hidden\");\n    }, 250);\n  }\n\n  \/\/ Close dropdown on click outside\n  document.addEventListener(\"click\", closeReviewsDropdown);\n\n  \/\/ Initialize Portfolio on screen mount\n  window.addEventListener('DOMContentLoaded', () => {\n    renderTestimonial(currentTestimonialIndex);\n  });\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-97bb62f e-con-full e-flex e-con e-parent\" data-id=\"97bb62f\" data-element_type=\"container\" data-e-type=\"container\" id=\"portfolio\">\n\t\t\t\t<div class=\"elementor-element elementor-element-79a9c60 elementor-widget elementor-widget-html\" data-id=\"79a9c60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= FEATURED PROJECTS PORTFOLIO - REDESIGNED ================= -->\n<section id=\"portfolio\" class=\"relative bg-brand-black py-20 overflow-hidden z-10 select-none\">\n  \n  <!-- Strict priority overrides to completely destroy all default red, pink, or magenta focus frames and overlays on tabs & buttons -->\n  <style>\n    #portfolioFilters .filter-btn {\n      -webkit-tap-highlight-color: transparent !important;\n      outline: none !important;\n      box-shadow: none !important;\n      border-width: 1px !important;\n      border-style: solid !important;\n      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;\n      background-color: #0C0C0E !important; \/* Force clean dark gray background *\/\n      border-color: #1F1F24 !important; \/* Muted gray border *\/\n      color: #94A3B8 !important; \/* Muted slate text *\/\n    }\n    \n    #portfolioFilters .filter-btn:hover {\n      border-color: #8CE629 !important; \/* Custom green on hover *\/\n      color: #FFFFFF !important;\n      background-color: transparent !important;\n    }\n\n    #portfolioFilters .filter-btn:focus,\n    #portfolioFilters .filter-btn:active {\n      outline: none !important;\n      box-shadow: none !important;\n    }\n\n    \/* Target the custom active-pill class specifically to block Elementor overrides *\/\n    #portfolioFilters .filter-btn.active-pill {\n      background-color: #8CE629 !important;\n      border-color: #8CE629 !important;\n      color: #030303 !important;\n    }\n    #portfolioFilters .filter-btn.active-pill:hover {\n      color: #030303 !important;\n      background-color: #8CE629 !important;\n    }\n\n    \/* Force \"Load More\" button colors to match your high-visibility styling and kill red variables *\/\n    #portfolioLoadMoreBtn {\n      -webkit-tap-highlight-color: transparent !important;\n      outline: none !important;\n      border: 1px solid #8CE629 !important; \/* Custom green outline *\/\n      background-color: transparent !important;\n      color: #8CE629 !important; \/* Green text on normal state *\/\n      box-shadow: 0 0 12px rgba(140, 230, 41, 0.15) !important;\n      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;\n    }\n\n    #portfolioLoadMoreBtn:hover,\n    #portfolioLoadMoreBtn:focus,\n    #portfolioLoadMoreBtn:active {\n      background-color: #8CE629 !important; \/* Solid green on hover *\/\n      color: #030303 !important; \/* Black text *\/\n      box-shadow: 0 0 25px rgba(140, 230, 41, 0.45) !important;\n      border-color: #8CE629 !important;\n    }\n  <\/style>\n\n  <div class=\"absolute w-[520px] h-[520px] glowing-bg top-10 left-1\/2 -translate-x-1\/2 pointer-events-none opacity-25\"><\/div>\n  <div class=\"absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-brand-accent\/40 to-transparent\"><\/div>\n\n  <div class=\"max-w-7xl mx-auto px-6 sm:px-8 relative z-10 space-y-12\">\n    \n    <!-- Centralised Header -->\n    <div class=\"max-w-3xl mx-auto text-center space-y-5 border-b border-brand-border\/60 pb-10\">\n      <span class=\"inline-flex items-center justify-center text-xs font-bold tracking-[0.2em] text-brand-accent uppercase\">\n        Our Work\n      <\/span>\n      <h2 class=\"text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white uppercase tracking-tight\">\n        Featured <span class=\"text-neutral-500 font-medium\">Projects<\/span>\n      <\/h2>\n      <a href=\"https:\/\/www.upwork.com\/freelancers\/~016ad1f46e822e160e?mp_source=share\" target=\"_blank\" rel=\"noopener\" class=\"back-btn-action inline-flex items-center justify-center gap-2 text-xs font-bold text-brand-accent hover:text-white transition-colors duration-200 uppercase tracking-widest\">\n        View all projects <i class=\"fa-solid fa-arrow-right-long text-[10px]\"><\/i>\n      <\/a>\n    <\/div>\n\n    <!-- Symmetrical Filter Navigation Row (Real Estate is first, All is last) -->\n    <div id=\"portfolioFilters\" class=\"flex flex-wrap justify-center gap-2.5 sm:gap-3\">\n      <button onclick=\"filterPortfolio('real-estate', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Real Estate<\/button>\n      <button onclick=\"filterPortfolio('investor-carrot', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Investor Carrot<\/button>\n      <button onclick=\"filterPortfolio('directories', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Directories<\/button>\n      <button onclick=\"filterPortfolio('mortgage', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Mortgage<\/button>\n      <button onclick=\"filterPortfolio('tax-credit', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Tax & Credit<\/button>\n      <button onclick=\"filterPortfolio('insurance', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Insurance<\/button>\n      <button onclick=\"filterPortfolio('notary', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Notary<\/button>\n      <button onclick=\"filterPortfolio('law', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Law Firms<\/button>\n      <button onclick=\"filterPortfolio('health-care', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Health Care<\/button>\n      <button onclick=\"filterPortfolio('trades', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Trades<\/button>\n      <button onclick=\"filterPortfolio('professional', this)\" class=\"filter-btn px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">Professional<\/button>\n      <!-- \"All\" tab positioned last and set active on load -->\n      <button onclick=\"filterPortfolio('all', this)\" class=\"filter-btn active-pill px-4 py-2 text-xs font-bold uppercase tracking-wider rounded-full\">All<\/button>\n    <\/div>\n\n    <!-- Grid Container -->\n    <div id=\"portfolioGrid\" class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-4\"><\/div>\n\n    <!-- Load More Button Wrapper with CSS Overrides applied -->\n    <div id=\"portfolioLoadMoreWrap\" class=\"flex justify-center pt-8\" style=\"display: none;\">\n      <button id=\"portfolioLoadMoreBtn\" type=\"button\" onclick=\"loadMorePortfolio()\" class=\"back-btn-action inline-flex items-center justify-center gap-2 px-8 py-4 rounded-lg text-xs font-bold uppercase tracking-widest transition-all duration-300\">\n        Load More <i class=\"fa-solid fa-chevron-down text-[10px]\"><\/i>\n      <\/button>\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n  const portfolioProjects = [\n    { title: \"BuyCondo Singapore\", category: \"real-estate\", label: \"Real Estate\", url: \"https:\/\/buycondo.sg\/\", description: \"Property portal built for luxury condo discovery, listing search, and real-estate lead conversion.\", tags: [\"WordPress\", \"Listings\"] },\n    { title: \"Gallagher Realty\", category: \"real-estate\", label: \"Real Estate\", url: \"https:\/\/gogallagher.com\/\", description: \"Brokerage website with modern property search, local positioning, and lead-focused presentation.\", tags: [\"MLS IDX\", \"Brokerage\"] },\n    { title: \"Luxe Knows\", category: \"real-estate\", label: \"Real Estate\", url: \"https:\/\/luxeknows.com\/\", description: \"Luxury real-estate experience designed around refined listings and high-intent buyer inquiries.\", tags: [\"Luxury UI\", \"WordPress\"] },\n    { title: \"Hodge & Kittrell\", category: \"real-estate\", label: \"Real Estate\", url: \"https:\/\/hodgekittrellsir.com\/\", description: \"High-end regional real-estate presence aligned with premium property marketing standards.\", tags: [\"Sotheby's\", \"Luxury\"] },\n    { title: \"Edge Realty\", category: \"real-estate\", label: \"Real Estate\", url: \"https:\/\/edgerealtyintl.com\/\", description: \"Real-estate brand site with clean navigation, property storytelling, and conversion structure.\", tags: [\"Real Estate\", \"Brand Site\"] },\n    { title: \"Sam Khalaf Realty\", category: \"real-estate\", label: \"Real Estate\", url: \"https:\/\/samkhalafrealty.com\/\", description: \"Realtor website organized for credibility, local service positioning, and buyer-seller contact flow.\", tags: [\"Realtor\", \"Lead Capture\"] },\n\n    { title: \"Very Fast Home Buyers\", category: \"investor-carrot\", label: \"Investor Carrot\", url: \"https:\/\/www.veryfasthomebuyers.com\/\", description: \"Investor Carrot property acquisition website built for motivated seller lead generation.\", tags: [\"Investor Carrot\", \"Seller Leads\"] },\n    { title: \"Sole King REI\", category: \"investor-carrot\", label: \"Investor Carrot\", url: \"https:\/\/solekingrei.com\/\", description: \"Cash home buyer funnel structured for fast offer requests and real-estate investor inquiries.\", tags: [\"Carrot CMS\", \"Acquisitions\"] },\n    { title: \"GSP Investors\", category: \"investor-carrot\", label: \"Investor Carrot\", url: \"https:\/\/www.gspinvestors.com\/\", description: \"Investor Carrot site focused on seller education, trust building, and lead intake.\", tags: [\"Investor Carrot\", \"Lead Engine\"] },\n    { title: \"John Buys Bay Area Houses\", category: \"investor-carrot\", label: \"Investor Carrot\", url: \"https:\/\/www.johnbuysbayareahouses.com\/\", description: \"Local cash buyer website optimized for Bay Area property seller conversions.\", tags: [\"Carrot CMS\", \"Local SEO\"] },\n\n    { title: \"SnapTap Directory\", category: \"directories\", label: \"Directory\", url: \"https:\/\/snaptapdirectory.com\/\", description: \"Business directory platform with searchable listings, member discovery, and local index structure.\", tags: [\"Directory\", \"Member Portal\"] },\n    { title: \"Point 2 Solar\", category: \"directories\", label: \"Directory\", url: \"http:\/\/www.point2solar.com\/\", description: \"Renewable-energy directory connecting solar buyers with relevant providers and service categories.\", tags: [\"Brilliant Directories\", \"Solar\"] },\n    { title: \"Fencing Directory\", category: \"directories\", label: \"Directory\", url: \"https:\/\/fencingdirectory.com\/\", description: \"Niche contractor directory for residential and commercial fencing service discovery.\", tags: [\"WordPress\", \"Listing Engine\"] },\n    { title: \"Kids Camp Connection\", category: \"directories\", label: \"Directory\", url: \"https:\/\/kidscampconnection.com\/\", description: \"Camp discovery directory designed to help families browse programs and compare options.\", tags: [\"Directory\", \"Search\"] },\n    { title: \"Quicki Direct\", category: \"directories\", label: \"Directory\", url: \"https:\/\/www.quickidirect.com\/\", description: \"Brilliant Directories marketplace with member listings, categories, and search-led navigation.\", tags: [\"Brilliant Directories\", \"Marketplace\"] },\n    { title: \"My Bahama Page\", category: \"directories\", label: \"Directory\", url: \"https:\/\/www.mybahamapage.com\/\", description: \"Regional business directory built for Bahamian listings, discovery, and local visibility.\", tags: [\"Brilliant Directories\", \"Local Index\"] },\n    { title: \"Finger Lakes Connected\", category: \"directories\", label: \"Directory\", url: \"https:\/\/www.fingerlakesconnected.com\/\", description: \"Community directory platform supporting regional businesses, events, and member discovery.\", tags: [\"Directory\", \"Community\"] },\n    { title: \"Coachtory\", category: \"directories\", label: \"Directory\", url: \"https:\/\/www.coachtory.com\/home\", description: \"Coaching directory experience built for expert discovery, category browsing, and profile browsing.\", tags: [\"Brilliant Directories\", \"Coaches\"] },\n\n    { title: \"Astar Home Capital\", category: \"mortgage\", label: \"Mortgage\", url: \"https:\/\/astarhomecapital.com\/\", description: \"Mortgage website structured for loan program education, secure inquiries, and borrower conversion.\", tags: [\"Mortgage\", \"Lead Forms\"] },\n    { title: \"All Lending Partners\", category: \"mortgage\", label: \"Mortgage\", url: \"http:\/\/www.alllendingpartners.com\/\", description: \"Lending partner website organized around borrower inquiries and loan application pathways.\", tags: [\"Lending\", \"WordPress\"] },\n    { title: \"TLT Consults\", category: \"mortgage\", label: \"Mortgage\", url: \"https:\/\/tltconsults.com\/\", description: \"Finance consulting site built to present lending support and guide client inquiry flow.\", tags: [\"Consulting\", \"Finance\"] },\n    { title: \"Wisco Capital\", category: \"mortgage\", label: \"Mortgage\", url: \"https:\/\/wiscocapital.com\/\", description: \"Capital and lending website with clear service positioning and conversion-focused contact paths.\", tags: [\"Capital\", \"Lending\"] },\n    { title: \"CrossCountry Mortgage\", category: \"mortgage\", label: \"Mortgage\", url: \"https:\/\/crosscountrymortgage.com\/\", description: \"Mortgage brand site supporting borrower education, branch discovery, and application journeys.\", tags: [\"Mortgage\", \"Borrowers\"] },\n    { title: \"No Shame Pathway\", category: \"mortgage\", label: \"Mortgage\", url: \"https:\/\/noshamepathway.com\/\", description: \"Finance-facing website with supportive messaging and a direct inquiry path for visitors.\", tags: [\"Finance\", \"Intake\"] },\n    { title: \"Mortgage 1st Augusta\", category: \"mortgage\", label: \"Mortgage\", url: \"https:\/\/www.mortgage1staugusta.com\/\", description: \"Local mortgage website built for loan officer credibility and borrower lead capture.\", tags: [\"Mortgage\", \"Local SEO\"] },\n\n    { title: \"Trusted Credit Repair\", category: \"tax-credit\", label: \"Credit Repair\", url: \"https:\/\/trustedcreditrepair.org\/\", description: \"Credit repair website focused on consultation requests, trust signals, and client onboarding.\", tags: [\"Credit Repair\", \"Consultations\"] },\n    { title: \"Zinu Credit Repair\", category: \"tax-credit\", label: \"Credit Repair\", url: \"https:\/\/www.zinucreditrepair.com\/\", description: \"Credit repair service website designed for authority, offer clarity, and lead conversion.\", tags: [\"Credit Repair\", \"Lead Capture\"] },\n\n    { title: \"Hyde Insurance Group\", category: \"insurance\", label: \"Life Insurance\", url: \"https:\/\/www.hydeinsurancegroup.com\/\", description: \"Insurance broker website with quote-oriented navigation and service-focused content structure.\", tags: [\"Insurance\", \"Broker Portal\"] },\n\n    { title: \"Central FL Notary\", category: \"notary\", label: \"Notary\", url: \"https:\/\/centralfloridanotaryagent.com\/\", description: \"Mobile notary website built for signing appointments, local trust, and quick booking actions.\", tags: [\"Mobile Notary\", \"Booking\"] },\n    { title: \"Raden's Notary\", category: \"notary\", label: \"Notary\", url: \"https:\/\/radennotary.com\/\", description: \"Notary service site with clean scheduling flow, service clarity, and location-based positioning.\", tags: [\"Loan Signing\", \"WordPress\"] },\n    { title: \"Canada Notary Public\", category: \"notary\", label: \"Notary\", url: \"https:\/\/canadanotarypublic.ca\/\", description: \"Canadian notary platform presenting document services, appointment paths, and credibility cues.\", tags: [\"Notary\", \"Appointments\"] },\n    { title: \"VA Notary Services\", category: \"notary\", label: \"Notary\", url: \"https:\/\/vanotaryservices.com\/\", description: \"Virginia notary website designed around service education, locality, and conversion contact points.\", tags: [\"Notary\", \"Local Services\"] },\n    { title: \"Notary Network\", category: \"notary\", label: \"Notary\", url: \"https:\/\/notarynetwork.com\/\", description: \"Notary network platform supporting service discovery, notary resources, and appointment intent.\", tags: [\"Network\", \"Directory\"] },\n    { title: \"The Notary Folks\", category: \"notary\", label: \"Notary\", url: \"https:\/\/thenotaryfolks.org\/\", description: \"Notary service website with straightforward messaging and easy access to signing support.\", tags: [\"Notary\", \"Signing\"] },\n\n    { title: \"West Law Firm\", category: \"law\", label: \"Law Firm\", url: \"https:\/\/westlawfirmofcalifornia.com\/\", description: \"California law firm website built for sensitive intake, authority, and litigation inquiries.\", tags: [\"Legal\", \"Intake\"] },\n    { title: \"Justifit\", category: \"law\", label: \"Law Firm\", url: \"https:\/\/www.justifit.fr\/\", description: \"Legal technology website with polished positioning, service clarity, and modern user flow.\", tags: [\"Legal Tech\", \"France\"] },\n    { title: \"Heartland Law Firm\", category: \"law\", label: \"Law Firm\", url: \"https:\/\/www.heartlandlawfirm.com\/\", description: \"Law firm website structured for practice area education, trust, and consultation requests.\", tags: [\"Legal\", \"Consultations\"] },\n    { title: \"Drake Law Group\", category: \"law\", label: \"Law Firm\", url: \"https:\/\/www.drakelawgroup.com\/\", description: \"Attorney website with clear practice messaging, credibility cues, and conversion-focused content.\", tags: [\"Law Firm\", \"Practice Areas\"] },\n    { title: \"Atlas Bankruptcy\", category: \"law\", label: \"Law Firm\", url: \"https:\/\/www.atlasbankruptcy.com\/\", description: \"Bankruptcy law website designed around education, reassurance, and confidential inquiry flow.\", tags: [\"Bankruptcy\", \"Legal Intake\"] },\n    { title: \"Familjens Jurist\", category: \"law\", label: \"Law Firm\", url: \"https:\/\/www.familjensjurist.se\/\", description: \"Legal services website with strong navigation, content structure, and user-focused service paths.\", tags: [\"Legal Services\", \"UX\"] },\n    { title: \"Saggi Law Firm\", category: \"law\", label: \"Law Firm\", url: \"https:\/\/saggilawfirm.com\/\", description: \"Law firm website with service-led content, clean presentation, and consultation entry points.\", tags: [\"Legal\", \"WordPress\"] },\n\n    { title: \"MiHomecare\", category: \"health-care\", label: \"Health Care\", url: \"https:\/\/mihomecare.com\/\", description: \"Home care service website structured for patient trust, service education, and family inquiries.\", tags: [\"Home Care\", \"Healthcare\"] },\n    { title: \"Simply Moore Homecare\", category: \"health-care\", label: \"Health Care\", url: \"https:\/\/www.simplymoorehomecare.com\/\", description: \"Home care website presenting care services, trust markers, and easy client contact options.\", tags: [\"Home Care\", \"Client Intake\"] },\n\n    { title: \"Columbus Handyman\", category: \"trades\", label: \"Handyman\", url: \"https:\/\/columbushandyman.com\/\", description: \"Handyman service website built for local search visibility, service clarity, and booking inquiries.\", tags: [\"Trades\", \"Local SEO\"] },\n\n    { title: \"Katie Sandler Coach\", category: \"professional\", label: \"Professional\", url: \"https:\/\/katiesandler.com\/\", description: \"Coaching and consulting website with polished brand storytelling and service discovery paths.\", tags: [\"Coaching\", \"Consulting\"] }\n  ];\n\n  const initialAllLimit = 9;\n  const loadMoreStep = 6;\n  let activePortfolioCategory = \"all\";\n  let visibleAllCount = initialAllLimit;\n\n  function portfolioCard(project) {\n    const tags = project.tags.map(tag => `\n      <span class=\"px-2.5 py-1 bg-brand-black border border-brand-border rounded-full text-[9px] text-brand-textMuted uppercase font-semibold\">${tag}<\/span>\n    `).join(\"\");\n\n    return `\n      <div class=\"portfolio-item group\" data-category=\"${project.category}\">\n        <article class=\"premium-card rounded-xl overflow-hidden flex flex-col justify-between min-h-[450px] border border-brand-border bg-brand-card transition-transform duration-300 hover:-translate-y-1\">\n          <div class=\"relative h-[205px] w-full overflow-hidden bg-brand-black border-b border-brand-border\">\n            <span class=\"absolute top-4 left-4 z-20 px-2.5 py-1 bg-brand-black\/80 backdrop-blur-sm border border-brand-border rounded text-[9px] font-bold text-brand-accent uppercase tracking-widest\">${project.label}<\/span>\n            <img decoding=\"async\" src=\"https:\/\/image.thum.io\/get\/width\/700\/crop\/850\/${project.url}\" alt=\"${project.title}\" class=\"w-full h-full object-cover object-top transition-transform duration-700 group-hover:scale-105\" loading=\"lazy\">\n          <\/div>\n          <div class=\"p-6 flex-grow flex flex-col justify-between text-center\">\n            <div class=\"space-y-2\">\n              <h3 class=\"text-base font-bold text-white uppercase tracking-wide\">${project.title}<\/h3>\n              <p class=\"text-brand-textMuted text-xs leading-relaxed line-clamp-3\">${project.description}<\/p>\n            <\/div>\n            <div class=\"flex flex-wrap justify-center gap-1.5 pt-5\">${tags}<\/div>\n            <a onclick=\"event.stopPropagation()\" href=\"${project.url}\" target=\"_blank\" rel=\"noopener\" class=\"back-btn-action inline-flex items-center justify-center gap-1.5 text-xs font-bold text-white hover:text-brand-accent transition-colors duration-200 w-fit mx-auto pt-5\">\n              Explore Live Environment <i class=\"fa-solid fa-arrow-up-right-from-square text-[9px]\"><\/i>\n            <\/a>\n          <\/div>\n        <\/article>\n      <\/div>\n    `;\n  }\n\n  function updateLoadMoreButton(totalVisibleProjects, totalFilteredLength) {\n    const loadMoreWrap = document.getElementById(\"portfolioLoadMoreWrap\");\n    const loadMoreBtn = document.getElementById(\"portfolioLoadMoreBtn\");\n\n    if (activePortfolioCategory !== \"all\" || totalVisibleProjects >= totalFilteredLength) {\n      loadMoreWrap.style.display = \"none\";\n      return;\n    }\n\n    \/\/ Set button text strictly to \"Load More\" without exposing counts\n    loadMoreWrap.style.display = \"flex\";\n    loadMoreBtn.innerHTML = `Load More <i class=\"fa-solid fa-chevron-down text-[10px]\"><\/i>`;\n  }\n\n  function renderPortfolio(category = \"all\") {\n    const grid = document.getElementById(\"portfolioGrid\");\n    const allCategoryProjects = category === \"all\" ? portfolioProjects : portfolioProjects.filter(project => project.category === category);\n    const projects = category === \"all\" ? allCategoryProjects.slice(0, visibleAllCount) : allCategoryProjects;\n    \n    grid.innerHTML = projects.map(portfolioCard).join(\"\");\n    updateLoadMoreButton(projects.length, allCategoryProjects.length);\n  }\n\n  function filterPortfolio(category, button) {\n    activePortfolioCategory = category;\n\n    \/\/ Toggle active classes safely using custom token triggers, bypassing WordPress default elements\n    document.querySelectorAll(\"#portfolioFilters .filter-btn\").forEach(btn => {\n      btn.classList.remove('active-pill');\n    });\n    button.classList.add('active-pill');\n\n    if (category === \"all\") {\n      visibleAllCount = initialAllLimit;\n    }\n\n    renderPortfolio(category);\n  }\n\n  function loadMorePortfolio() {\n    if (activePortfolioCategory !== \"all\") return;\n\n    visibleAllCount = Math.min(visibleAllCount + loadMoreStep, portfolioProjects.length);\n    renderPortfolio(\"all\");\n  }\n\n  \/\/ Pre-execute on load\n  renderPortfolio();\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c3603dc e-con-full e-flex e-con e-parent\" data-id=\"c3603dc\" data-element_type=\"container\" data-e-type=\"container\" id=\"faq\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01133f8 elementor-widget elementor-widget-html\" data-id=\"01133f8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ================= FAQs SECTION ================= -->\n<section id=\"faq\" class=\"relative bg-brand-black py-20 overflow-hidden z-10 select-none\">\n  \n  <!-- Strict priority overrides to completely destroy all default red, pink, or magenta focus frames and overlays -->\n  <style>\n    \/* Direct button resets to bypass Elementor focus\/active overlays *\/\n    .premium-card, .premium-card * {\n      -webkit-tap-highlight-color: transparent !important;\n      outline: none !important;\n      outline: 0 !important;\n    }\n\n    \/* Force the card backgrounds to always stay inside your dark-charcoal variables *\/\n    .premium-card {\n      background-color: #0C0C0E !important;\n      border: 1px solid #1F1F24 !important;\n      box-shadow: none !important;\n      transition: border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;\n    }\n\n    \/* Soft logo green border glow on hover *\/\n    .premium-card:hover {\n      border-color: rgba(140, 230, 41, 0.4) !important;\n    }\n\n    \/* Resets raw button styles and forces questions to wrap instead of truncating *\/\n    .faq-btn {\n      background: transparent !important;\n      background-color: transparent !important;\n      border: none !important;\n      box-shadow: none !important;\n      padding: 24px !important;\n      white-space: normal !important; \/* Force browser text wrapping *\/\n    }\n\n    .faq-btn:focus, \n    .faq-btn:active, \n    .faq-btn:focus-visible {\n      outline: none !important;\n      background: transparent !important;\n      background-color: transparent !important;\n      box-shadow: none !important;\n    }\n\n    \/* Rotates chevrons smoothly *\/\n    .faq-icon-box {\n      transition: transform 0.3s ease, color 0.3s ease;\n      color: #8CE629 !important; \/* Keep icon matching your logo green *\/\n    }\n  <\/style>\n\n  <!-- Subtle back ambient glow -->\n  <div class=\"absolute w-[450px] h-[450px] glowing-bg top-12 left-1\/2 -translate-x-1\/2 pointer-events-none opacity-20\"><\/div>\n\n  <!-- Width increased to max-w-5xl (1024px) to accommodate long sentences on all displays -->\n  <div class=\"max-w-5xl mx-auto px-6 sm:px-8 relative z-10 space-y-12\">\n    \n    <!-- Section Header -->\n    <div class=\"text-center space-y-3 max-w-lg mx-auto\">\n      <span class=\"text-xs font-bold tracking-[0.2em] text-brand-accent uppercase\">Inquiries<\/span>\n      <h2 class=\"text-2xl sm:text-3xl font-extrabold text-white uppercase tracking-wide\">FAQ <span class=\"gradient-text font-medium\">Directory<\/span><\/h2>\n      <p class=\"text-brand-textMuted text-xs sm:text-sm\">Review standard integration systems, development processes, and work policies.<\/p>\n    <\/div>\n\n    <!-- Symmetrical Accordion Loop -->\n    <div class=\"space-y-4\">\n      \n      <!-- FAQ 1: Real Estate IDX -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            What is your process for integrating MLS\/IDX feeds?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            I configure automated listing feeds on custom WordPress websites using stable API structures. Your maps, search parameters, and property indexes are stylized to update dynamically directly from your regional real estate board's database.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 2: Brilliant Directory -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            Can you migrate our existing directory system to Brilliant Directories?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            Yes. I manage secure database imports, member listings routing, subscription plan mapping, and design configurations to transition your custom directories directly onto the Brilliant Directories framework.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 3: Platform Multi-Management -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            Which content management systems (CMS) do you master?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            I am highly specialized in WordPress, Brilliant Directories, Wix Editor\/Velo, Squarespace, and custom responsive front-end frameworks (HTML, CSS, JS).\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 4: Technical SEO & Speed -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            Are your custom website builds SEO-optimized?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            Every build integrates technical SEO configurations, including correct schema structures, Google Search Console optimization, semantic HTML tags, and technical speed auditing to keep loading times brief.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 5: Payment & Milestones -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            How do we manage contracts and milestones?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            To ensure complete transactional escrow security, projects can be initiated and monitored directly through my certified Upwork or Fiverr seller contracts. This provides full milestone verification for both parties.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 6: Notary Signings -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            Do you design websites for mobile notaries and signing agents?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            Yes, I have setup multiple mobile notary and loan-signing platforms with integrated client appointment tools, location indices, and interactive service menus.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 7: Calculations & Tax -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            Can you integrate quote calculators on credit and tax sites?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            Absolutely. I construct responsive intake forms, dynamic estimation frameworks, and custom quotation calculators to qualify and capture prospective customer details immediately.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 8: Staging & Revisions -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            What is your typical turnaround time and review process?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            Standard websites are delivered within 2 to 4 weeks. Every contract includes active development staging links, allowing you to review visual and structural metrics continuously and request revisions before we deploy live.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 9: Directory Monetization -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            Can you configure membership checkouts and monetization features on Brilliant Directories?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            Yes. I implement Stripe, PayPal, or specialized local payment gateway APIs to automate premium billing tiers, lead-purchase configurations, featured directory upgrades, and member claim-listing payment loops.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 10: Home Care Compliance -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            What specialized elements do you build for healthcare and home care agency sites?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            I integrate secure, multi-step patient registration fields, encrypted intake logs, custom companion-matching selectors, and clear service area map regions to elevate operational compliance and trust.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 11: CMS Strategy Decisions -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            How do I choose between WordPress, Wix, or Webflow for my business?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            WordPress is the premier choice for scaling directories, IDX properties, and SEO index databases. Wix is ideal for fast, user-friendly, and lightweight notary or handyman local sites, while Webflow provides pristine developer-level visual animations. I evaluate your target goals to suggest the most cost-effective path.\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FAQ 12: Retainers & Support -->\n      <div class=\"premium-card rounded-xl overflow-hidden transition-all duration-300\">\n        <button onclick=\"toggleFAQ(this)\" class=\"faq-btn w-full flex justify-between items-center text-left focus:outline-none transition-colors duration-300\">\n          <span class=\"text-sm sm:text-base font-bold text-white transition-colors duration-300 leading-snug whitespace-normal break-words\">\n            Do you provide post-launch website maintenance and tutorial guides?\n          <\/span>\n          <span class=\"text-brand-accent text-sm ml-4 shrink-0 faq-icon-box\">\n            <i class=\"fa-solid fa-chevron-down\"><\/i>\n          <\/span>\n        <\/button>\n        <div class=\"faq-content max-h-0 overflow-hidden transition-all duration-500 ease-in-out\">\n          <div class=\"p-6 pt-0 border-t border-brand-border\/40 text-xs sm:text-sm text-brand-textMuted leading-relaxed\">\n            Yes. Every project deployment is accompanied by a custom, recorded video walkthrough detailing how to make edits, upload blogs, or manage your portal administratively. I also offer monthly support retainers for security monitoring, caching audits, and content updates.\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<!-- Vanilla JS FAQ Accordion Toggler with automated close loop -->\n<script>\n  function toggleFAQ(button) {\n    const parentCard = button.closest('.premium-card');\n    const content = button.nextElementSibling;\n    const labelText = button.querySelector('span:first-child');\n    const iconBox = button.querySelector('.faq-icon-box');\n\n    \/\/ 1. Check if the clicked item is already open\n    const isOpen = content.style.maxHeight && content.style.maxHeight !== '0px';\n\n    \/\/ 2. Loop through all FAQ items to reset them (Accordion sync)\n    document.querySelectorAll('.faq-content').forEach(el => {\n      el.style.maxHeight = '0px';\n    });\n    document.querySelectorAll('.faq-btn span:first-child').forEach(txt => {\n      txt.style.setProperty('color', '#FFFFFF', 'important');\n    });\n    document.querySelectorAll('.faq-icon-box').forEach(icon => {\n      icon.style.setProperty('transform', 'rotate(0deg)', 'important');\n      icon.style.setProperty('color', '#8CE629', 'important');\n    });\n\n    \/\/ 3. Toggle clicked item depending on its previous state\n    if (!isOpen) {\n      \/\/ Set to dynamic height scroll metrics\n      content.style.maxHeight = content.scrollHeight + 'px';\n      \n      \/\/ Explicitly color the active question to logo-green\n      if (labelText) {\n        labelText.style.setProperty('color', '#8CE629', 'important');\n      }\n      \n      \/\/ Rotate chevron icon cleanly\n      if (iconBox) {\n        iconBox.style.setProperty('transform', 'rotate(180deg)', 'important');\n      }\n    } else {\n      content.style.maxHeight = '0px';\n    }\n  }\n<\/script>\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>Certified Web Developer High-Performance SEO-Optimized Websites I combine high-end development, responsive layouts, and technical SEO structure to build websites that capture qualified leads and increase customer acquisition rates. View Projects Chat on WhatsApp Outright Confidence On Fiverr Secure Orders and Verified Delivery Order securely through the world&#8217;s leading freelance marketplace. Access fixed milestone plans, dedicated [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webmatrixshub.com\/index.php?rest_route=\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webmatrixshub.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/webmatrixshub.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/webmatrixshub.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webmatrixshub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2"}],"version-history":[{"count":241,"href":"https:\/\/webmatrixshub.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":340,"href":"https:\/\/webmatrixshub.com\/index.php?rest_route=\/wp\/v2\/pages\/2\/revisions\/340"}],"wp:attachment":[{"href":"https:\/\/webmatrixshub.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}