style: reposition deck arrows to left/right on desktop and hide number

Author: TechStack Global

index.html

@@ -108,7 +108,7 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
 
       </div>
       <!-- Pull-Out Animated Deck -->
-      <div class="hero-visual">
+      <div class="hero-visual" style="position: relative;">
         <style>
           .deck-container {
             position: relative;
@@ -246,9 +246,24 @@ <h1>Make Smarter <br /><span class="gradient-text">Tech Decisions.</span>
             margin: 0.5rem auto 0;
             position: relative;
             z-index: 10;
+            pointer-events: none;
+          }
+
+          @media (min-width: 768px) {
+            .deck-controls {
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              width: calc(100% + 120px);
+              max-width: none;
+              justify-content: space-between;
+              margin: 0;
+            }
           }
 
           .deck-controls button {
+            pointer-events: auto;
             background: rgba(15, 23, 42, 0.8);
             backdrop-filter: blur(10px);
             border: 1px solid var(--border-glass);
@@ -324,8 +339,7 @@ <h3>Alienware AW3423DWF</h3>
 
         <div class="deck-controls">
           <button id="deckPrev" aria-label="Previous Review"><i class="fa-solid fa-arrow-left"></i></button>
-          <span style="font-size: 0.9rem; color: var(--text-muted); font-weight: 600; letter-spacing: 1px;"
-            id="deckCount">1 / 3</span>
+          <span style="display: none;" id="deckCount">1 / 3</span>
           <button id="deckNext" aria-label="Next Review"><i class="fa-solid fa-arrow-right"></i></button>
         </div>