<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- VIPRIX_SEO_BLOCK -->
  <link rel="canonical" href="https://www.viprix-tech.com/">
  <meta name="description" content="VipRix builds premium websites, web apps, and custom software. Turn your vision into a high-performance digital product.">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.viprix-tech.com/">
  <meta property="og:site_name" content="VipRix">
  <meta property="og:title" content="VipRix — Premium Software Solutions & Web Development">
  <meta property="og:description" content="VipRix builds premium websites, web apps, dashboards, and custom software for businesses worldwide. Transform your vision into a high-performance digital product.">
  <meta property="og:image" content="https://www.viprix-tech.com/assets/og-image.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="VipRix — Premium Software Solutions & Web Development">
  <meta name="twitter:description" content="VipRix builds premium websites, web apps, dashboards, and custom software for businesses worldwide. Transform your vision into a high-performance digital product.">
  <meta name="twitter:image" content="https://www.viprix-tech.com/assets/og-image.png">
  <!-- /VIPRIX_SEO_BLOCK -->

  <!-- JSON-LD Structured Data — Organization, WebSite, ProfessionalService -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "Organization",
        "@id": "https://www.viprix-tech.com/#organization",
        "name": "VipRix Software Solutions",
        "alternateName": "VipRix",
        "url": "https://www.viprix-tech.com",
        "logo": "https://www.viprix-tech.com/assets/og-image.png",
        "image": "https://www.viprix-tech.com/assets/og-image.png",
        "description": "VipRix builds premium websites, web apps, dashboards, and custom software for businesses worldwide.",
        "email": "Support@viprix-tech.com",
        "telephone": "+1-510-901-2161",
        "address": { "@type": "PostalAddress", "addressCountry": "EG" },
        "sameAs": ["https://www.instagram.com/viprix_tech"]
      },
      {
        "@type": "WebSite",
        "@id": "https://www.viprix-tech.com/#website",
        "url": "https://www.viprix-tech.com",
        "name": "VipRix",
        "publisher": { "@id": "https://www.viprix-tech.com/#organization" },
        "inLanguage": "en-US"
      },
      {
        "@type": "ProfessionalService",
        "@id": "https://www.viprix-tech.com/#service",
        "name": "VipRix Software Solutions",
        "image": "https://www.viprix-tech.com/assets/og-image.png",
        "url": "https://www.viprix-tech.com",
        "telephone": "+1-510-901-2161",
        "priceRange": "$49 - $499/mo",
        "areaServed": "Worldwide",
        "serviceType": [
          "Web Development", "UI/UX Design", "E-Commerce Solutions",
          "Custom Software Development", "SEO Optimization", "Maintenance & Support"
        ]
      }
    ]
  }
  </script>

  <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

  <!-- Hero background video (preload) -->
  <link rel="preload" as="video" href="assets/hero-bg.mp4" type="video/mp4">
  <meta name="keywords" content="web development, software solutions, website design, e-commerce, SEO, UI/UX, VipRix">
  <meta name="author" content="VipRix">
  <meta name="theme-color" content="#0d0d1a">
  <script>(function(){try{if(!localStorage.getItem('viprix-theme-v2')){localStorage.setItem('viprix-theme','dark');localStorage.setItem('viprix-theme-v2','1');}var t=localStorage.getItem('viprix-theme');if(t!=='light')document.documentElement.setAttribute('data-theme','dark');}catch(e){document.documentElement.setAttribute('data-theme','dark');}})();</script>
  <title>VipRix | Software Solutions </title>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32.png">
  <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
  <!-- Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap"
    rel="stylesheet">

  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

  <!-- Styles -->
  <link rel="stylesheet" href="css/style.css">
  <link rel="stylesheet" href="css/cyan-buttons.css"><link rel="stylesheet" href="css/electric-border.css"><link rel="stylesheet" href="css/magic-nav.css"><link rel="stylesheet" href="css/responsive.css">
</head>

<body>

  <!-- Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
       MOBILE OVERLAY
       Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â -->
  <div class="mobile-overlay" id="mobile-overlay"></div>

  <!-- Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
       HEADER
       Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â -->
  <header class="header" id="header">
    <div class="container">
      <!-- Logo -->
     <div class="logo" id="logo">
      <div class="logo-icon">
        <img src="assets/logo-header.png" alt="VipRix Tech - Software Solutions" style="width: 100%; height: 100%; object-fit: contain; display: block;">
      </div>
      <div class="logo-brand">
        <span class="logo-text">VipRix Tech</span>
        <span class="logo-slogan">Software Solutions</span>
      </div>
    </div>

      <!-- Navigation -->
      <nav class="nav-links" id="nav-links">
        <a href="#home" class="active">Home</a>
        <a href="#services">Services</a>
        <a href="#why-us">About</a>
        <a href="#portfolio">Portfolio</a>
        <a href="#testimonials">Reviews</a>
        <a href="#contact">Contact</a>
        <a href="customer-auth.html" class="btn btn-primary nav-cta" id="nav-cta-btn"><i class="fas fa-user-plus"></i> Sign Up</a>
        <button type="button" class="theme-toggle" id="theme-toggle" role="switch" aria-label="Toggle dark mode" title="Toggle dark mode"><i class="fas fa-sun theme-toggle-sun"></i><i class="fas fa-moon theme-toggle-moon"></i><span class="theme-toggle-knob"></span></button>
      </nav>

      <!-- Mobile Toggle -->
      <button class="mobile-toggle" id="mobile-toggle" aria-label="Toggle navigation">
        <span></span>
        <span></span>
        <span></span>
      </button>
    </div>
  </header>

  <main id="main">

  <!-- Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
       HERO SECTION
       Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â -->
  <section class="hero hero-video" id="home">
    <!-- 3D looping video background -->
    <div class="hero-video-stage">
      <video
        id="hero-video"
        autoplay muted loop playsinline
        webkit-playsinline
        x5-playsinline
        x5-video-player-type="h5"
        preload="metadata"
        aria-hidden="true">
        <source src="assets/hero-bg.mp4" type="video/mp4">
      </video>
      <!-- Animated CSS fallback (visible when video can't play) -->
      <div class="hero-video-fallback" aria-hidden="true">
        <div class="fallback-orb fallback-orb-1"></div>
        <div class="fallback-orb fallback-orb-2"></div>
        <div class="fallback-orb fallback-orb-3"></div>
        <div class="fallback-grid"></div>
      </div>
      <!-- Vignette overlay for depth -->
      <div class="hero-video-vignette" aria-hidden="true"></div>
    </div>

    <!-- Foreground text overlay — staggered alignment, vertically centered -->
    <div class="hero-video-content">
      <h1 class="hero-title">
        <span class="line">We Build</span>
        <span class="line highlight">Digital Experiences</span>
        <span class="line">That Grow</span>
        <span class="line highlight">Your Business</span>
      </h1>
      <p class="hero-description">
        Transform your vision into high-performance websites
      </p>
    </div>
  </section>

  <!-- Hero video autoplay fallback for mobile -->
  <script>
    (function() {
      var video = document.getElementById('hero-video');
      if (!video) return;

      function tryPlay() {
        var playPromise = video.play();
        if (playPromise !== undefined) {
          playPromise.then(function() {
            // Video is playing — hide fallback
            video.parentElement.classList.add('video-playing');
          }).catch(function() {
            // Autoplay blocked — show CSS fallback
            video.parentElement.classList.add('video-blocked');
          });
        }
      }

      // Attempt autoplay on load
      if (video.readyState >= 2) {
        tryPlay();
      } else {
        video.addEventListener('loadeddata', tryPlay, { once: true });
      }

      // Also try on first user interaction (covers iOS low-power mode)
      function playOnInteraction() {
        if (video.paused) {
          video.play().then(function() {
            video.parentElement.classList.add('video-playing');
            video.parentElement.classList.remove('video-blocked');
          }).catch(function() {});
        }
        document.removeEventListener('touchstart', playOnInteraction);
        document.removeEventListener('click', playOnInteraction);
        document.removeEventListener('scroll', playOnInteraction);
      }
      document.addEventListener('touchstart', playOnInteraction, { once: true, passive: true });
      document.addEventListener('click', playOnInteraction, { once: true });
      document.addEventListener('scroll', playOnInteraction, { once: true, passive: true });
    })();
  </script>

  <style>
    /* ============================================================
       Hero — 3D Video background + minimal text overlay
       Mobile-safe with CSS animated fallback
       ============================================================ */
    .hero-video {
      position: relative;
      width: 100%;
      min-height: 100vh;
      min-height: 100dvh;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      overflow: hidden;
      padding: 0 !important;
      background: #0d0d1a !important;
    }
    .hero-video .hero-grid-bg,
    .hero-video .hero-orb { display: none !important; }

    /* ---- video stage ---- */
    .hero-video-stage {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
    }
    .hero-video-stage video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      width: auto;
      height: auto;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%) translateZ(0);
      object-fit: cover;
      display: block;
      background: #0d0d1a;
    }

    /* ---- CSS animated fallback (shown when video is blocked) ---- */
    .hero-video-fallback {
      position: absolute;
      inset: 0;
      overflow: hidden;
      opacity: 1;
      transition: opacity 0.6s ease;
    }
    /* Hide fallback when video is confirmed playing */
    .video-playing .hero-video-fallback { opacity: 0; pointer-events: none; }
    /* Show fallback prominently when video is blocked */
    .video-blocked video { opacity: 0; }
    .video-blocked .hero-video-fallback { opacity: 1; }

    .fallback-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      animation: floatOrb 8s ease-in-out infinite;
    }
    .fallback-orb-1 {
      width: 400px; height: 400px;
      background: rgba(0, 212, 255, 0.15);
      top: 20%; left: 10%;
      animation-delay: 0s;
    }
    .fallback-orb-2 {
      width: 300px; height: 300px;
      background: rgba(0, 100, 255, 0.1);
      top: 50%; right: 10%;
      animation-delay: -3s;
    }
    .fallback-orb-3 {
      width: 250px; height: 250px;
      background: rgba(0, 255, 170, 0.08);
      bottom: 10%; left: 40%;
      animation-delay: -5s;
    }
    .fallback-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(0, 212, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 212, 255, 0.03) 1px, transparent 1px);
      background-size: 60px 60px;
      animation: gridShift 20s linear infinite;
    }

    @keyframes floatOrb {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-30px) scale(1.05); }
    }
    @keyframes gridShift {
      0% { transform: translate(0, 0); }
      100% { transform: translate(60px, 60px); }
    }

    /* ---- vignette ---- */
    .hero-video-vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at center, transparent 30%, #0d0d1a 85%);
      opacity: 0.6;
      pointer-events: none;
      z-index: 1;
    }

    /* ---- text content ---- */
    .hero-video-content {
      position: relative;
      z-index: 3;
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 40px;
      text-align: left;
      pointer-events: none;
    }
    .hero-video-content .hero-title,
    .hero-video-content .hero-description { pointer-events: auto; }

    .hero-video-content .hero-title {
      font-family: 'Outfit', system-ui, sans-serif;
      font-size: clamp(2.2rem, 5.5vw, 4.5rem);
      line-height: 1.04;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: #FAFAFA !important;
      -webkit-text-fill-color: #FAFAFA !important;
      background: none !important;
      -webkit-background-clip: unset !important;
      background-clip: unset !important;
      opacity: 1 !important;
      animation: none !important;
      text-shadow: 0 4px 40px rgba(0,0,0,0.8);
      margin: 0 0 1.6rem 0;
      max-width: 650px;
      display: flex;
      flex-direction: column;
      gap: .22em;
    }
    .hero-video-content .hero-title .line { display: block; }
    .hero-video-content .hero-title .highlight {
      color: #00d4ff;
      -webkit-text-fill-color: #00d4ff;
      background: none;
      -webkit-background-clip: unset;
      background-clip: unset;
      filter: drop-shadow(0 0 24px rgba(0,212,255,0.3));
    }
    .hero-video-content .hero-description {
      font-family: 'Inter', system-ui, sans-serif;
      font-size: clamp(1rem, 1.35vw, 1.2rem);
      line-height: 1.65;
      color: rgba(250,250,250,0.7);
      max-width: 540px;
      margin: 0;
      text-shadow: 0 2px 16px rgba(0,0,0,0.7);
    }

    /* ---- Mobile ---- */
    @media (max-width: 768px) {
      .hero-video { min-height: 100dvh; min-height: 100vh; padding-top: 80px !important; }
      .hero-video-content { padding-left: 1.2rem; padding-right: 1.2rem; position: relative !important; }
      .hero-video-content .hero-title { font-size: clamp(1.8rem, 8vw, 2.6rem); max-width: 100%; }
      .fallback-orb-1 { width: 250px; height: 250px; }
      .fallback-orb-2 { width: 180px; height: 180px; }
      .fallback-orb-3 { width: 150px; height: 150px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-video-stage video { display: none; }
      .hero-video-fallback { display: none; }
      .hero-video {
        background:
          radial-gradient(circle at 25% 20%, rgba(0, 212, 255, 0.06), transparent 50%),
          radial-gradient(circle at 70% 75%, rgba(0, 212, 255, 0.04), transparent 50%),
          #0d0d1a !important;
      }
    }
  </style>

  <!-- Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
       SERVICES SECTION
       Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â -->
  <section class="services services-carousel-section" id="services">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-label">What We Do</span>
        <h2 class="section-title">Our Services</h2>
        <p class="section-subtitle">We design and build high-performance, custom-tailored digital products that scale.</p>
      </div>
      
      <!-- 3D Carousel Stage -->
      <div class="carousel-stage-container">


        <div class="carousel-3d-stage">
          <div class="carousel-3d-ring">
            
            <!-- Card 1: Web Dev -->
            <div class="carousel-3d-card" data-index="0">
              <div class="card-inner">
                <div class="card-front">
                  <div class="card-icon icon-grad-1"><i class="fas fa-code"></i></div>
                  <h3>Web Development</h3>
                  <p class="short-desc">Custom-built, high-performance websites and web applications using the latest tech stacks.</p>
                  <div class="card-meta">
                    <span class="meta-badge"><i class="fas fa-layer-group"></i> React/Next.js</span>
                    <span class="meta-badge"><i class="fas fa-hourglass-half"></i> 2-6 weeks</span>
                  </div>
                </div>
                <div class="card-details">
                  <div class="details-grid">
                    <div class="detail-row"><span class="label">Stack:</span><span class="value">React, Next.js, Node, Express</span></div>
                    <div class="detail-row"><span class="label">Delivery:</span><span class="value">2-6 weeks depending on scope</span></div>
                    <div class="detail-row"><span class="label">Includes:</span><span class="value">Responsive, SEO-ready, hosting</span></div>
                  </div>
                  <a href="customer-auth.html" class="carousel-card-cta"><i class="fas fa-rocket"></i> Start Project</a>
                </div>
              </div>
            </div>

            <!-- Card 2: UI/UX -->
            <div class="carousel-3d-card" data-index="1">
              <div class="card-inner">
                <div class="card-front">
                  <div class="card-icon icon-grad-2"><i class="fas fa-palette"></i></div>
                  <h3>UI/UX Design</h3>
                  <p class="short-desc">User-centered design that converts. Intuitive interfaces and interactive prototypes.</p>
                  <div class="card-meta">
                    <span class="meta-badge"><i class="fab fa-figma"></i> Figma / XD</span>
                    <span class="meta-badge"><i class="fas fa-chart-line"></i> High Conversion</span>
                  </div>
                </div>
                <div class="card-details">
                  <div class="details-grid">
                    <div class="detail-row"><span class="label">Tools:</span><span class="value">Figma, Adobe XD, Prototyping</span></div>
                    <div class="detail-row"><span class="label">Process:</span><span class="value">Research, Wireframe, Design, Test</span></div>
                    <div class="detail-row"><span class="label">Focus:</span><span class="value">Conversion-optimized UI</span></div>
                  </div>
                  <a href="customer-auth.html" class="carousel-card-cta"><i class="fas fa-rocket"></i> Start Project</a>
                </div>
              </div>
            </div>

            <!-- Card 3: E-Commerce -->
            <div class="carousel-3d-card" data-index="2">
              <div class="card-inner">
                <div class="card-front">
                  <div class="card-icon icon-grad-3"><i class="fas fa-shopping-cart"></i></div>
                  <h3>E-Commerce</h3>
                  <p class="short-desc">Seamless checkout, secure payments, and custom integrations to boost sales.</p>
                  <div class="card-meta">
                    <span class="meta-badge"><i class="fab fa-shopify"></i> Shopify/Woo</span>
                    <span class="meta-badge"><i class="fas fa-credit-card"></i> Payment Gateways</span>
                  </div>
                </div>
                <div class="card-details">
                  <div class="details-grid">
                    <div class="detail-row"><span class="label">Platforms:</span><span class="value">Shopify, WooCommerce, Custom</span></div>
                    <div class="detail-row"><span class="label">Features:</span><span class="value">Payments, inventory, analytics</span></div>
                    <div class="detail-row"><span class="label">Scale:</span><span class="value">Startup to enterprise level</span></div>
                  </div>
                  <a href="customer-auth.html" class="carousel-card-cta"><i class="fas fa-rocket"></i> Start Project</a>
                </div>
              </div>
            </div>

            <!-- Card 4: SEO -->
            <div class="carousel-3d-card" data-index="3">
              <div class="card-inner">
                <div class="card-front">
                  <div class="card-icon icon-grad-4"><i class="fas fa-magnifying-glass-chart"></i></div>
                  <h3>SEO Optimization</h3>
                  <p class="short-desc">Boost your online search visibility, traffic, and search result rankings organically.</p>
                  <div class="card-meta">
                    <span class="meta-badge"><i class="fas fa-search"></i> Technical SEO</span>
                    <span class="meta-badge"><i class="fas fa-arrow-trend-up"></i> Organic Growth</span>
                  </div>
                </div>
                <div class="card-details">
                  <div class="details-grid">
                    <div class="detail-row"><span class="label">Strategy:</span><span class="value">Technical, Content, Links</span></div>
                    <div class="detail-row"><span class="label">Tools:</span><span class="value">Analytics, Search Console</span></div>
                    <div class="detail-row"><span class="label">Results:</span><span class="value">Higher ranking & organic traffic</span></div>
                  </div>
                  <a href="customer-auth.html" class="carousel-card-cta"><i class="fas fa-rocket"></i> Start Project</a>
                </div>
              </div>
            </div>

            <!-- Card 5: Support -->
            <div class="carousel-3d-card" data-index="4">
              <div class="card-inner">
                <div class="card-front">
                  <div class="card-icon icon-grad-5"><i class="fas fa-wrench"></i></div>
                  <h3>Maintenance &amp; Support</h3>
                  <p class="short-desc">Ongoing updates, server monitoring, security, and priority technical support.</p>
                  <div class="card-meta">
                    <span class="meta-badge"><i class="fas fa-shield-halved"></i> 24/7 Monitoring</span>
                    <span class="meta-badge"><i class="fas fa-circle-check"></i> Weekly Backups</span>
                  </div>
                </div>
                <div class="card-details">
                  <div class="details-grid">
                    <div class="detail-row"><span class="label">Coverage:</span><span class="value">24/7 monitoring, updates</span></div>
                    <div class="detail-row"><span class="label">Includes:</span><span class="value">Security, backups, uptime</span></div>
                    <div class="detail-row"><span class="label">Response:</span><span class="value">Priority within 2 hours</span></div>
                  </div>
                  <a href="customer-auth.html" class="carousel-card-cta"><i class="fas fa-rocket"></i> Start Project</a>
                </div>
              </div>
            </div>

            <!-- Card 6: Software -->
            <div class="carousel-3d-card" data-index="5">
              <div class="card-inner">
                <div class="card-front">
                  <div class="card-icon icon-grad-6"><i class="fas fa-gears"></i></div>
                  <h3>Custom Software</h3>
                  <p class="short-desc">Tailored CRM systems, enterprise portals, database solutions, and API automation tools.</p>
                  <div class="card-meta">
                    <span class="meta-badge"><i class="fas fa-server"></i> CRMs &amp; APIs</span>
                    <span class="meta-badge"><i class="fas fa-cloud"></i> Cloud Solutions</span>
                  </div>
                </div>
                <div class="card-details">
                  <div class="details-grid">
                    <div class="detail-row"><span class="label">Solutions:</span><span class="value">CRMs, dashboards, workflows</span></div>
                    <div class="detail-row"><span class="label">Approach:</span><span class="value">Agile sprints, iterative</span></div>
                    <div class="detail-row"><span class="label">Tech:</span><span class="value">Cloud, APIs, Microservices</span></div>
                  </div>
                  <a href="customer-auth.html" class="carousel-card-cta"><i class="fas fa-rocket"></i> Start Project</a>
                </div>
              </div>
            </div>

          </div>
        </div>

        <!-- Indicators / Dots -->
        <div class="carousel-dots-container"></div>
      </div>
    </div>
  </section>

  <style>
    /* ===== 3D Services Carousel ===== */
    .services-carousel-section {
      position: relative;
      overflow: hidden;
      padding: 6rem 0;
      background: radial-gradient(circle at 50% 50%, rgba(0, 212, 255, 0.05), transparent 70%);
    }

    .carousel-stage-container {
      position: relative;
      width: 100%;
      max-width: 1100px;
      margin: 80px auto 0;
      padding: 20px 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .carousel-3d-stage {
      position: relative;
      width: 100%;
      height: 520px;
      perspective: 1200px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    .carousel-3d-ring {
      position: relative;
      width: 320px;
      height: 480px;
      transform-style: preserve-3d;
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .carousel-3d-card {
      position: absolute;
      top: 0;
      left: 0;
      width: 320px;
      height: 480px;
      transform-style: preserve-3d;
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease, filter 0.5s ease;
      cursor: pointer;
      user-select: none;
      backface-visibility: hidden;
      border-radius: 24px;
      overflow: hidden;
    }

    .card-inner {
      position: relative;
      width: 100%;
      height: 100%;
      background: rgba(13, 13, 26, 0.75);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 212, 255, 0.15);
      border-radius: 24px;
      padding: 2.2rem 2rem;
      display: flex;
      flex-direction: column;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
      transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s ease;
    }

    /* Active & Background cards positioning transition */
    .carousel-3d-card .card-front {
      transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
      transform: translateY(60px);
    }
    .carousel-3d-card.active .card-front {
      transform: translateY(0);
    }

    /* Active & Background cards opacity */
    .carousel-3d-card:not(.active) {
      opacity: 0.35;
      filter: blur(3px) grayscale(40%);
      pointer-events: none;
    }
    
    .carousel-3d-card.active {
      opacity: 1;
      filter: none;
      pointer-events: auto;
      z-index: 10;
    }

    .carousel-3d-card.active .card-inner {
      border-color: rgba(0, 212, 255, 0.5);
      box-shadow: 0 20px 50px rgba(0, 212, 255, 0.25), 0 0 30px rgba(0, 212, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    }
    
    .carousel-3d-card.active:hover .card-inner {
      transform: translateY(-8px);
      border-color: rgba(0, 212, 255, 0.8);
      box-shadow: 0 30px 60px rgba(0, 212, 255, 0.35), 0 0 40px rgba(0, 212, 255, 0.15);
    }

    /* Card Details absolute positioned at the bottom */
    .carousel-3d-card .card-details {
      position: absolute;
      bottom: 2.2rem;
      left: 2rem;
      right: 2rem;
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 0.5s ease, transform 0.5s ease;
      pointer-events: none;
    }
    .carousel-3d-card.active .card-details {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Gradient backgrounds for service icons */
    .icon-grad-1 { background: linear-gradient(135deg, #00d4ff, #0097b2); }
    .icon-grad-2 { background: linear-gradient(135deg, #F43F5E, #FB7185); }
    .icon-grad-3 { background: linear-gradient(135deg, #0EA5E9, #38BDF8); }
    .icon-grad-4 { background: linear-gradient(135deg, #F59E0B, #FBBF24); }
    .icon-grad-5 { background: linear-gradient(135deg, #7C3AED, #A78BFA); }
    .icon-grad-6 { background: linear-gradient(135deg, #06B6D4, #22D3EE); }

    /* Card Content Styling */
    .card-icon {
      width: 70px;
      height: 70px;
      border-radius: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.2rem;
      color: #fff;
      margin-bottom: 1.5rem;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
      position: relative;
    }
    .card-icon::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
      opacity: 0.6;
    }

    .carousel-3d-card h3 {
      font-family: 'Outfit', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 0.8rem;
      letter-spacing: -0.01em;
    }

    .carousel-3d-card .short-desc {
      font-size: 0.9rem;
      line-height: 1.5;
      color: rgba(255, 255, 255, 0.65);
      margin-bottom: 1.2rem;
    }
    html:not([data-theme="dark"]) .carousel-3d-card .short-desc {
      color: var(--text-muted, #71717A);
    }

    .card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1.2rem;
      transition: opacity 0.4s ease;
    }
    .carousel-3d-card:not(.active) .card-meta {
      opacity: 0.8;
    }

    .meta-badge {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.08);
      padding: 0.3rem 0.65rem;
      border-radius: 8px;
      font-size: 0.75rem;
      color: rgba(255, 255, 255, 0.8);
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }
    html:not([data-theme="dark"]) .meta-badge {
      background: rgba(0, 0, 0, 0.04);
      border-color: rgba(0, 0, 0, 0.06);
      color: var(--text, #18181B);
    }

    .details-grid {
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding-top: 1.2rem;
      margin-bottom: 1.2rem;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }
    html:not([data-theme="dark"]) .details-grid {
      border-color: rgba(0, 0, 0, 0.08);
    }

    .detail-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      font-size: 0.82rem;
      gap: 1rem;
    }

    .detail-row .label {
      font-weight: 600;
      color: var(--accent, #00d4ff);
      opacity: 0.95;
      flex-shrink: 0;
    }
    html:not([data-theme="dark"]) .detail-row .label {
      color: var(--accent, #0097b2);
    }

    .detail-row .value {
      color: rgba(255, 255, 255, 0.85);
      text-align: right;
      line-height: 1.3;
    }
    html:not([data-theme="dark"]) .detail-row .value {
      color: var(--text, #18181B);
    }

    .carousel-card-cta {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      padding: 0.8rem;
      background: linear-gradient(135deg, var(--accent, #00d4ff), #0084a3);
      color: #0d0d1a;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.88rem;
      border-radius: 12px;
      transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
    }
    .carousel-card-cta:hover {
      transform: translateY(-2px);
      filter: brightness(1.1);
      box-shadow: 0 5px 15px rgba(0, 212, 255, 0.3);
      color: #0d0d1a;
    }



    /* Dots Indicators */
    .carousel-dots-container {
      display: flex;
      gap: 10px;
      margin-top: 30px;
      z-index: 15;
    }

    .carousel-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
    }
    html:not([data-theme="dark"]) .carousel-dot {
      background: rgba(0, 0, 0, 0.2);
    }

    .carousel-dot.active {
      background: var(--accent, #00d4ff);
      width: 28px;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
    }
    html:not([data-theme="dark"]) .carousel-dot.active {
      background: var(--accent, #0097b2);
    }

    /* Light Theme Styling overrides for Card */
    html:not([data-theme="dark"]) .card-inner {
      background: rgba(255, 255, 255, 0.9);
      border-color: rgba(0, 151, 178, 0.15);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    }
    html:not([data-theme="dark"]) .carousel-3d-card.active .card-inner {
      border-color: rgba(0, 151, 178, 0.4);
      box-shadow: 0 20px 40px rgba(0, 151, 178, 0.15);
    }
    html:not([data-theme="dark"]) .carousel-3d-card h3 {
      color: var(--text, #18181B);
    }

    /* Responsiveness adjustments */
    @media (max-width: 991px) {
      .carousel-3d-stage {
        height: 500px;
      }
      .carousel-3d-ring, .carousel-3d-card {
        width: 280px;
        height: 450px;
      }
      .carousel-3d-card .card-front {
        transform: translateY(55px);
      }
      .carousel-3d-card.active .card-front {
        transform: translateY(0);
      }
    }

    @media (max-width: 768px) {
      .services-carousel-section {
        padding: 4rem 0;
      }
      .carousel-stage-container {
        margin-top: 40px;
      }
    }

    @media (max-width: 600px) {
      .carousel-3d-ring, .carousel-3d-card {
        width: 250px;
        height: 410px;
      }
      .card-inner {
        padding: 1.5rem 1.3rem;
      }
      .carousel-3d-card .card-front {
        transform: translateY(50px);
      }
      .carousel-3d-card.active .card-front {
        transform: translateY(0);
      }
      .carousel-3d-card .card-details {
        bottom: 1.5rem;
        left: 1.3rem;
        right: 1.3rem;
      }
      .card-icon {
        width: 50px;
        height: 50px;
        font-size: 1.6rem;
        margin-bottom: 0.8rem;
      }
      .carousel-3d-card h3 {
        font-size: 1.15rem;
        margin-bottom: 0.4rem;
      }
      .carousel-3d-card .short-desc {
        font-size: 0.8rem;
        margin-bottom: 0.6rem;
      }
      .meta-badge {
        font-size: 0.68rem;
        padding: 0.2rem 0.5rem;
      }
      .details-grid {
        padding-top: 0.6rem;
        margin-bottom: 0.6rem;
        gap: 0.3rem;
      }
      .detail-row {
        font-size: 0.72rem;
      }
      .carousel-card-cta {
        padding: 0.55rem;
        font-size: 0.78rem;
        border-radius: 10px;
      }
    }
  </style>

  <script>
    (function() {
      var stageContainer = document.querySelector('.carousel-stage-container');
      var ring = document.querySelector('.carousel-3d-ring');
      var cards = Array.prototype.slice.call(document.querySelectorAll('.carousel-3d-card'));
      var dotsContainer = document.querySelector('.carousel-dots-container');

      if (!ring || cards.length === 0 || !dotsContainer) return;

      var activeIndex = 0;
      var totalCards = cards.length;
      var tz = 300; // Z translation depth
      var isDragging = false;
      var startX = 0;
      var currentX = 0;
      var dragRotation = 0;
      var rotationFactor = 0.3; // degrees per pixel dragged
      var autoplayInterval;

      // Initialize indicators
      for (var i = 0; i < totalCards; i++) {
        var dot = document.createElement('button');
        dot.className = 'carousel-dot' + (i === 0 ? ' active' : '');
        dot.setAttribute('aria-label', 'Go to service ' + (i + 1));
        dot.setAttribute('data-index', i);
        dotsContainer.appendChild(dot);
      }

      function updateTz() {
        var width = window.innerWidth;
        if (width > 991) {
          tz = 300;
        } else if (width > 768) {
          tz = 260;
        } else if (width > 600) {
          tz = 220;
        } else {
          tz = 150;
        }
        updateCarousel();
      }

      function updateCarousel() {
        var angle = -activeIndex * 60;
        ring.style.transform = 'rotateY(' + angle + 'deg)';

        cards.forEach(function(card, idx) {
          var diff = idx - activeIndex;
          while (diff > 3) diff -= 6;
          while (diff < -3) diff += 6;

          var cardAngle = idx * 60;
          card.style.transform = 'rotateY(' + cardAngle + 'deg) translateZ(' + tz + 'px)';

          card.classList.remove('active', 'side', 'back');
          if (diff === 0) {
            card.classList.add('active');
          } else if (Math.abs(diff) === 1) {
            card.classList.add('side');
          } else {
            card.classList.add('back');
          }
        });

        var dots = dotsContainer.querySelectorAll('.carousel-dot');
        dots.forEach(function(dot, idx) {
          dot.classList.toggle('active', idx === activeIndex);
        });
      }

      function rotateToIndex(idx) {
        activeIndex = (idx + totalCards) % totalCards;
        updateCarousel();
        resetAutoplay();
      }



      // Dot navigation
      dotsContainer.addEventListener('click', function(e) {
        var target = e.target;
        if (target.classList.contains('carousel-dot')) {
          var idx = parseInt(target.getAttribute('data-index'), 10);
          rotateToIndex(idx);
        }
      });

      // Click card to bring to front
      cards.forEach(function(card) {
        card.addEventListener('click', function() {
          var idx = parseInt(card.getAttribute('data-index'), 10);
          if (activeIndex !== idx) {
            rotateToIndex(idx);
          }
        });
      });

      // Drag & Swipe navigation
      function dragStart(e) {
        isDragging = true;
        startX = e.clientX || e.touches[0].clientX;
        dragRotation = 0;
        ring.style.transition = 'none'; // pause transition during drag
        stopAutoplay();
      }

      function dragMove(e) {
        if (!isDragging) return;
        currentX = e.clientX || (e.touches && e.touches[0].clientX);
        var deltaX = currentX - startX;
        dragRotation = deltaX * rotationFactor;
        
        // Temp rotation of the ring
        var angle = -activeIndex * 60 + dragRotation;
        ring.style.transform = 'rotateY(' + angle + 'deg)';
      }

      function dragEnd() {
        if (!isDragging) return;
        isDragging = false;
        ring.style.transition = 'transform 0.5s cubic-bezier(0.25, 1, 0.5, 1)'; // restore transition

        if (dragRotation > 15) {
          // Dragged right (rotate clockwise) -> previous card
          rotateToIndex(activeIndex - 1);
        } else if (dragRotation < -15) {
          // Dragged left (rotate counter-clockwise) -> next card
          rotateToIndex(activeIndex + 1);
        } else {
          // Bounce back
          updateCarousel();
        }
        startAutoplay();
      }

      // Attach mouse drag
      stageContainer.addEventListener('mousedown', dragStart);
      window.addEventListener('mousemove', dragMove);
      window.addEventListener('mouseup', dragEnd);

      // Attach touch swipe
      stageContainer.addEventListener('touchstart', dragStart, { passive: true });
      stageContainer.addEventListener('touchmove', dragMove, { passive: true });
      stageContainer.addEventListener('touchend', dragEnd);

      // Autoplay
      function startAutoplay() {
        stopAutoplay();
        autoplayInterval = setInterval(function() {
          if (!isDragging) {
            rotateToIndex(activeIndex + 1);
          }
        }, 3500);
      }

      function stopAutoplay() {
        if (autoplayInterval) {
          clearInterval(autoplayInterval);
        }
      }

      function resetAutoplay() {
        stopAutoplay();
        startAutoplay();
      }

      // Pause on hover
      stageContainer.addEventListener('mouseenter', stopAutoplay);
      stageContainer.addEventListener('mouseleave', startAutoplay);

      // Initial Setup
      updateTz();
      startAutoplay();
      window.addEventListener('resize', updateTz);
    })();
  </script>

  <!-- Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
       WHY CHOOSE US SECTION
       Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â -->
  <section class="why-us" id="why-us">
    <div class="container">
      <div class="why-us-content">
        <!-- Left: Text + Features -->
        <div class="why-us-text reveal">
          <span class="section-label">Why VipRix Tech</span>
          <h2 class="section-title">Why Choose Us?</h2>
          <p class="section-subtitle"></p>

          <div class="why-us-features">
            <div class="feature-item">
              <div class="feature-icon">
                <i class="fas fa-bolt"></i>
              </div>
              <div class="feature-info">
                <h4>Lightning-Fast Performance</h4>
                <p></p>
              </div>
            </div>

            <div class="feature-item">
              <div class="feature-icon">
                <i class="fas fa-mobile-screen"></i>
              </div>
              <div class="feature-info">
                <h4>Fully Responsive Design</h4>
                <p></p>
              </div>
            </div>

            <div class="feature-item">
              <div class="feature-icon">
                <i class="fas fa-headset"></i>
              </div>
              <div class="feature-info">
                <h4>Dedicated Support</h4>
                <p></p>
              </div>
            </div>

            <div class="feature-item">
              <div class="feature-icon">
                <i class="fas fa-clock"></i>
              </div>
              <div class="feature-info">
                <h4>On-Time Delivery</h4>
                <p></p>
              </div>
            </div>
          </div>
        </div>

        <!-- Right: Stats -->
        <div class="stats-grid reveal reveal-delay-2">
          <div class="stat-card">
            <div class="stat-number" data-count="50" data-suffix="+">0</div>
            <div class="stat-label">Projects Completed</div>
          </div>
          <div class="stat-card">
            <div class="stat-number" data-count="30" data-suffix="+">0</div>
            <div class="stat-label">Happy Clients</div>
          </div>
          <div class="stat-card">
            <div class="stat-number" data-count="99" data-suffix="%">0</div>
            <div class="stat-label">Client Satisfaction</div>
          </div>
          <div class="stat-card">
            <div class="stat-number" data-count="24" data-suffix="/7">0</div>
            <div class="stat-label">Support Available</div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
       PORTFOLIO SECTION
       Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â -->
  <section class="portfolio" id="portfolio">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-label">Our Work</span>
        <h2 class="section-title">Featured Projects</h2>
        <p class="section-subtitle"></p>
      </div>

      <!-- Coverflow Slider -->
      <div class="coverflow reveal" id="portfolio-coverflow">
        <div class="coverflow-track">
          <!-- Slide 1 -->
          <div class="coverflow-slide">
            <img src="https://images.unsplash.com/photo-1526628953301-3e589a6a8b74?w=600&amp;h=400&amp;fit=crop"
              alt="KPI Observation System — National Bank of Egypt">
            <div class="coverflow-info">
              <span class="coverflow-tag">Enterprise App</span>
              <h3>KPI Observation System</h3>
              <p>3-tier employee performance tracking for National Bank of Egypt</p>
            </div>
          </div>
          <!-- Slide 2 -->
          <div class="coverflow-slide">
            <img src="https://images.unsplash.com/photo-1560472354-b33ff0c44a43?w=600&amp;h=400&amp;fit=crop"
              alt="Speed Data Analysis Analytics Dashboard">
            <div class="coverflow-info">
              <span class="coverflow-tag">Dashboard</span>
              <h3>Speed Data Analysis Dashboard</h3>
              <p>Real-time analytics dashboard for business intelligence</p>
            </div>
          </div>
          <!-- Slide 3 -->
          <div class="coverflow-slide">
            <img src="https://images.unsplash.com/photo-1504384308090-c894fdcc538d?w=600&amp;h=400&amp;fit=crop"
              alt="TechNova Corporate Website">
            <div class="coverflow-info">
              <span class="coverflow-tag">Web Design</span>
              <h3>TechNova</h3>
              <p>Modern corporate website for a technology startup</p>
            </div>
          </div>
          <!-- Slide 4 -->
          <div class="coverflow-slide">
            <img src="https://images.unsplash.com/photo-1522542550221-31fd19575a2d?w=600&amp;h=400&amp;fit=crop"
              alt="FreshBite Restaurant Landing Page">
            <div class="coverflow-info">
              <span class="coverflow-tag">Landing Page</span>
              <h3>FreshBite</h3>
              <p>Elegant restaurant landing page with online ordering</p>
            </div>
          </div>
          <!-- Slide 5 -->
          <div class="coverflow-slide">
            <img src="https://images.unsplash.com/photo-1497366216548-37526070297c?w=600&amp;h=400&amp;fit=crop"
              alt="PropelFit Fitness Platform">
            <div class="coverflow-info">
              <span class="coverflow-tag">Web Design</span>
              <h3>PropelFit</h3>
              <p>Fitness platform with membership &amp; booking system</p>
            </div>
          </div>
          <!-- Slide 6 -->
          <div class="coverflow-slide">
            <img src="https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?w=600&amp;h=400&amp;fit=crop"
              alt="Volt Coffee Reservation System">
            <div class="coverflow-info">
              <span class="coverflow-tag">Web App</span>
              <h3>Volt</h3>
              <p>Coffee web with integrated reservation system</p>
            </div>
          </div>
        </div>
        <button class="coverflow-btn coverflow-prev" aria-label="Previous project"><i class="fas fa-chevron-left"></i></button>
        <button class="coverflow-btn coverflow-next" aria-label="Next project"><i class="fas fa-chevron-right"></i></button>
        <div class="coverflow-dots" id="coverflow-dots"></div>
      </div>
    </div>
  </section>

  <!-- Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
       TESTIMONIALS SECTION
       Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â -->
  <section class="testimonials" id="testimonials">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-label">Testimonials</span>
        <h2 class="section-title">What Our Clients Say</h2>
        <p class="section-subtitle"></p>
      </div>

      <div class="testimonials-wrapper reveal">
        <div class="testimonials-track" id="testimonials-track">
          <!-- Testimonial 1 -->
          <div class="testimonial-card">
            <div class="testimonial-stars">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <p class="testimonial-text">
              VipRix completely transformed our online presence. The website they built exceeded all our expectations .
              it's fast, beautiful, and our customers love it. Highly recommended!
            </p>
            <div class="testimonial-author">
              <div class="testimonial-avatar">MK</div>
              <div class="testimonial-author-info">
                <h4>Mohamed Khalil</h4>
                <span>CEO, TechStart</span>
              </div>
            </div>
          </div>

          <!-- Testimonial 2 -->
          <div class="testimonial-card">
            <div class="testimonial-stars">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <p class="testimonial-text">
              The team at VipRix delivered our e-commerce platform on time and on budget. Sales have increased by 200%
              since launch. Their attention to detail is unmatched.
            </p>
            <div class="testimonial-author">
              <div class="testimonial-avatar">SA</div>
              <div class="testimonial-author-info">
                <h4>Sara Ahmed</h4>
                <span>Founder, Volt</span>
              </div>
            </div>
          </div>

          <!-- Testimonial 3 -->
          <div class="testimonial-card">
            <div class="testimonial-stars">
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
            </div>
            <p class="testimonial-text">
              A highly professional Dashboard System featuring a clean, intuitive UI and well-organized data visualization. The standout 'Import + Preview' feature ensures a scalable, organized workflow that significantly enhances productivity.
            </p>
            <div class="testimonial-author">
              <div class="testimonial-avatar">MM</div>
              <div class="testimonial-author-info">
                <h4>Mo'men Mamdouh</h4>
                <span>Supply Chain , 'Sector'</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Carousel Dots -->
        <div class="testimonial-nav">
          <button class="testimonial-dot active" aria-label="Testimonial 1" id="dot-1"></button>
          <button class="testimonial-dot" aria-label="Testimonial 2" id="dot-2"></button>
          <button class="testimonial-dot" aria-label="Testimonial 3" id="dot-3"></button>
        </div>
      </div>
    </div>
  </section>

  <!-- Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
       CONTACT / CTA SECTION
       Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â -->
  <section class="contact" id="contact">
    <div class="container">
      <div class="section-header reveal">
        <span class="section-label">Get In Touch</span>
        <h2 class="section-title">Let's Build Something Great</h2>
        <p class="section-subtitle"></p>
      </div>

      <div class="contact-grid">
        <!-- Contact Info -->
        <div class="contact-info reveal">
          <h3>Let's Talk About Your Project</h3>

          <div class="contact-details">
            <a class="contact-item" href="mailto:Support@viprix-tech.com" style="text-decoration:none;color:inherit;">
              <div class="contact-item-icon">
                <i class="fas fa-envelope"></i>
              </div>
              <div class="contact-item-text">
                <h4>Email Us</h4>
                <p>Support@viprix-tech.com</p>
              </div>
            </a>

            <a class="contact-item" href="https://wa.me/15109012161" target="_blank" rel="noopener noreferrer" style="text-decoration:none;color:inherit;">
              <div class="contact-item-icon">
                <i class="fab fa-whatsapp"></i>
              </div>
              <div class="contact-item-text">
                <h4>WhatsApp</h4>
                <p>(+1) 5109012161</p>
              </div>
            </a>

            <div class="contact-item">
              <div class="contact-item-icon">
                <i class="fas fa-phone"></i>
              </div>
              <div class="contact-item-text">
                <h4>Call Us</h4>
                <p>(+1) 5109012161</p>
              </div>
            </div>

            <a class="contact-item" href="https://www.instagram.com/viprix_tech" target="_blank" rel="noopener noreferrer" style="text-decoration:none;color:inherit;">
              <div class="contact-item-icon">
                <i class="fab fa-instagram"></i>
              </div>
              <div class="contact-item-text">
                <h4>Instagram</h4>
                <p>VipRix_Tech</p>
              </div>
            </a>

          </div>
        </div>

        <!-- Contact Form (Netlify Forms) -->
        <div class="contact-form-wrap reveal">
          <div id="form-success-banner" style="display:none;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.3);color:#00d4ff;padding:.8rem 1rem;border-radius:10px;margin-bottom:1rem;font-size:.9rem"><i class="fas fa-circle-check"></i> Thanks! Your message has been sent. We'll get back to you soon.</div>
          <form id="contactForm" name="contact-viprix" method="POST" data-netlify="true" netlify-honeypot="bot-field" action="/index.html?success=true">
            <input type="hidden" name="form-name" value="contact-viprix" />
            <p style="display:none"><label>Don't fill this out: <input name="bot-field" /></label></p>

            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" id="email" name="email" required>
            </div>
            <div class="form-group">
              <label for="message">Message</label>
              <textarea id="message" name="message" rows="5" required></textarea>
            </div>
            <button type="submit" class="submit-btn btn btn-primary"><i class="fas fa-paper-plane"></i> Send Message</button>
          </form>
        </div>

      </div>
    </div>
  </section>

  <style>
    .contact-form-wrap{background:var(--surface,#141416);border:1.5px solid var(--accent,#00d4ff);box-shadow:0 0 30px rgba(0,212,255,.08);border-radius:var(--radius-xl,24px);padding:2.5rem}
    .contact-form-wrap .form-group{margin-bottom:1.1rem}
    .contact-form-wrap label{display:block;font-size:.85rem;font-weight:500;color:var(--text);margin-bottom:.4rem}
    .contact-form-wrap input,
    .contact-form-wrap textarea{width:100%;padding:.75rem 1rem;background:var(--bg,#0d0d1a);border:1px solid var(--border);border-radius:var(--radius-md,10px);color:var(--text);font-size:.95rem;font-family:'Inter',system-ui,sans-serif;outline:none;transition:border-color .2s,box-shadow .2s}
    .contact-form-wrap input:focus,
    .contact-form-wrap textarea:focus{border-color:var(--accent,#00d4ff);box-shadow:0 0 0 3px var(--accent-dim,rgba(0,212,255,.08))}
    .contact-form-wrap textarea{resize:vertical;min-height:110px}
    .contact-form-wrap .submit-btn{width:100%;margin-top:.4rem}
    .contact-form-wrap input::placeholder,
    .contact-form-wrap textarea::placeholder{color:var(--text-subtle,#71717A)}
  </style>

  <!-- Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â
       FOOTER
       Ã¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢ÂÃ¢â€¢Â -->
  </main>

  <footer class="footer" id="footer">
    <div class="container">
      <!-- Footer Bottom -->
      <div class="footer-bottom">
        <p>&copy; 2026 VipRix Tech. All Rights Reserved.</p>
        <div class="footer-bottom-links">
          <a href="pricing.html">Pricing</a>
          <a href="privacy.html">Privacy Policy</a>
          <a href="terms.html">Terms of Service</a>
          <a href="refund.html">Refund Policy</a>
        </div>
      </div>
    </div>
  </footer>


  <!-- Scripts -->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2/dist/umd/supabase.min.js"></script>
  <script src="js/supabase-config.js"></script>
  <script src="js/quotes-store.js"></script>
  <script src="js/main.js"></script>
  <script>
    (function(){
      var root = document.documentElement;
      var btn = document.getElementById('theme-toggle');
      function apply(theme){
        root.setAttribute('data-theme', theme);
        if (btn) { btn.setAttribute('aria-checked', theme === 'dark'); btn.setAttribute('aria-pressed', theme === 'dark'); }
      }
      var saved = localStorage.getItem('viprix-theme') || 'dark';
      apply(saved);
      // Netlify form success banner
      try {
        if (new URLSearchParams(window.location.search).get('success') === 'true') {
          var banner = document.getElementById('form-success-banner');
          if (banner) {
            banner.style.display = 'block';
            document.getElementById('contact').scrollIntoView({behavior:'smooth', block:'start'});
          }
        }
      } catch(e){}
      if (btn) btn.addEventListener('click', function(){
        var next = root.getAttribute('data-theme') === 'dark' ? 'light' : 'dark';
        localStorage.setItem('viprix-theme', next);
        apply(next);
      });
    })();
  </script>
  <script src="js/magic-nav.js"></script>
  <script src="js/electric-border.js"></script>
  <script src="js/fire-footer.js"></script>
</body>

</html>