PageSourceSearch

https://snipback.com/

html snipback.com collected 2026-10-09 22:58:01 UTC 182,948 bytes, 4,688 lines download raw bytes

1<!---------header include------------------->
2    <!DOCTYPE html>
3<html lang="en">
4
5<head>
6    <title>SNIPBACK AI     </title>
7    
8    <!-------need to include this style and script at top ----------------->
9
10
11            <link rel="stylesheet" href="/mix/css/homepage.min.css?id=32a4c5c3b39b8729cd15a2c3380ae154">
12        <link rel="stylesheet" href="/mix/css/main.min.css?id=520507f2155acd4e319b6ca27f84216e">
13        
13<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
13
14    <!-------------------------------------------------------------->
15    <meta charset="utf-8">
16    <link rel="canonical" href="https://snipback.com/" />
17    <meta name="google-site-verification" content="MbcZOx042pMY1IZ7IIoP-h7aprySe5SidwVvkJykAfc" />
18    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
19    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
20    <meta name="keywords"
21        content="game, sports, event, Powerful Multi-Camera Platform, Live Clipping & Tagging, snipback">
22    <meta name="description"
23        content="Watch the game, not your screen! Use our game remote to bookmark after any play and we’ll generate a 10 second clip (8 seconds in the past, 2 seconds in the future). You can also add audio notes and color tags to all your bookmarks. View game footage and bookmarks easily after the game, as well as share highlight reels (based on your bookmarks) and individual clips easily">
24    <meta name="csrf-token" content="AbPAXtQT7zVbRrQVIru2Klrph2bFtR2uqmh8lqQs" />
25
26        <meta name="mobile-web-app-capable" content="yes" />
27    <meta name="application-name" content="SNIPBACK AI" />
28    <meta name="apple-mobile-web-app-title" content="SNIPBACK AI" />
29    <meta property="fb:app_id" content="1245824489356485" />
30    <meta property="og:title" content="SNIPBACK AI" />
31    <meta name="description"
32        content="Snipback: Capture, save, and share real-time moments effortlessly with our innovative live video recording app.">
33    <meta property="og:description" content="Watch the game, not your
34    screen! Use our game remote to bookmark after any play and we’ll generate a 10 second clip (8 seconds in the past, 2
35    seconds in the future). You can also add audio notes and color tags to all your bookmarks. View game footage and
36    bookmarks easily after the game, as well as share highlight reels (based on your bookmarks) and individual clips
37    easily" />
38    <meta property="og:type" content="website" />
39    <meta property="og:url" content="https://snipback.com">
40    <meta property="og:image" content="https://snipback.com/images/logo.png" />
41    <meta property="og:image:width" content="1800">
42    <meta property="og:image:height" content="550">
43    <meta name="twitter:title" content="SNIPBACK AI">
44    <meta name="twitter:image" content="https://snipback.com/images/logo.png">
45    <meta name="twitter:description" content="Watch the game, not your
46    screen! Use our game remote to bookmark after any play and we’ll generate a 10 second clip (8 seconds in the past, 2
47    seconds in the future). You can also add audio notes and color tags to all your bookmarks. View game footage and
48    bookmarks easily after the game, as well as share highlight reels (based on your bookmarks) and individual clips
49    easily">
50<style>
51  
52   .header-stat{
53        border-radius: 8px;
54        text-align: center;
55        background-color: #E1261C;
56        padding: 0.1rem .4rem;
57        /* margin-left: 2px; */
58        position: relative;
59        left: 8px;
60   }
61     .header-stat img{
62        width: 15px;
63        position: relative;
64        top: -1px;
65       }
66       .header-stat-wrap{
67    position:relative;
68    display:inline-block;
69}
70
71.header-stat{
72    width:30px;
73    height:30px;
74    background:#E1261C;
75    border-radius:8px;
76    display:flex;
77    align-items:center;
78    justify-content:center;
79    cursor:pointer;
80    transition:.3s;
81}
82
83.header-stat:hover{
84    background:#c91d16;
85}
86
87.header-stat img{
88    width:15px;
89}
90
91.headerDropdown-custom{
92
93    position:absolute;
94    top:55px;
95    right:0;
96
97    width:185px;
98
99    background:#080808;
100
101    border:1px solid rgba(255,255,255,.18);
102
103    border-radius:14px;
104
105    box-shadow:0 15px 40px rgba(0,0,0,.35);
106
107    overflow:hidden;
108
109    opacity:0;
110    visibility:hidden;
111
112    transform:translateY(-10px);
113
114    transition:.3s ease;
115
116    z-index:9999;
117
118    }
119    
120    .headerDropdown-custom.show{
121    
122        opacity:1;
123        visibility:visible;
124        transform:translateY(0);
125    
126    }
127    
128    .headerDropdown-custom .dropdown-item{
129    
130        display:flex;
131        align-items:center;
132    
133        gap:12px;
134    
135        color:#fff;
136    
137        text-decoration:none;
138    
139        padding:14px 16px;
140    
141        border-bottom:1px solid rgba(255,255,255,.08);
142    
143        transition:.25s;
144    
145        font-size:15px;
146    
147    }
148    
149    .headerDropdown-custom .dropdown-item:last-child{
150    
151        border-bottom:none;
152    
153    }
154    
155    .headerDropdown-custom .dropdown-item:hover{
156    
157        background:#141414;
158    
159    }
160    
161    .headerDropdown-custom .dropdown-item img{
162    
163        width:18px;
164    
165    }
166    
167    .check-icon{
168    
169        margin-left:auto;
170        color:#E1261C;
171    
172    }
173    .headerDropdown-custom span{
174        color: #ffffff;
175    }
176
177</style>
178</head>
179<div class="page-wrapper" data-scroll-container>
180    
181    <style>
182        @media (min-width: 768px) and (max-width: 1199.98px) {
183            #navbar .navbar-collapse { min-width: 0; }
184            #navbar .navbar-nav { flex-wrap: wrap; min-width: 0; }
185            #navbar .profileSec { flex-shrink: 0; }
186        }
187    </style>
188    <header id="navbar">
189
190        <div class="header-wrap-inner">
191            <nav class="navbar navbar-expand-md navbar-dark bg-dark">
192                <div class="container">
193                    <a class="navbar-brand" href="https://snipback.com">
194                        <img src="https://snipback.com/assets/images/home/logo-large.png" alt="snipback-logo"
195                            id="light-logo" class="logo logo1">
196                        <img src="https://snipback.com/assets/images/home/logo-dark.png" alt="snipback-logo" id="dark-logo"
197                            class="logo logo2">
198                    </a>
199                    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"
200                        data-bs-target="#main-sidebar" aria-controls="mainSidebar">
201                        <span class="navbar-toggler-icon"></span>
202                    </button>
203                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
204                        <ul class="navbar-nav ms-auto">
205                            <li class="nav-item">
206                                <a href="/"
207                                    class="menu_link nav-link  active "
208                                    style="color:#ffffff !important;" aria-current="page">Home</a>
209                            </li>
210                            <!-- <li class="nav-item">
211                                <a href="/film"
212                                    class="menu_link nav-link "
213                                    style="color:#ffffff !important;">Film</a>
214                            </li> -->
215                            <li class="nav-item">
216                                <a href="/pricing"
217                                    class="menu_link nav-link "
218                                    style="border-radius: 25px;">Pricing</a>
219                            </li>
220                        </ul>
221                        <ul class="buttons profileSec">
222                            <li class="nav-item">
223                                <a class="nav-link btn btn-white sm" id="loginmodalhomepage" data-bs-toggle="modal"
224                                    data-bs-target="#login-modal">Login</a>
225                            </li>
226                        </ul>
227                          <div class="header-stat-wrap">
228                            
229                                <div class="header-stat" id="menuToggle">
230                                    <img src="https://snipback.com/assets/images/home/header-stat.png">
231                                </div>
232                            
233                                <div class="header-dropdown headerDropdown-custom" id="headerDropdown">
234                            
235                                    <a href="https://calendly.com/snipbackai/site-demo?month=2026-01" target="_blank" class="dropdown-item">
236                                        <img src="https://snipback.com/assets/images/home/schedule-calender.png">
237                                        <span>Schedule Demo</span>
238                                        <i class="fa fa-check check-icon"></i>
239                                    </a>
240                        
241                    
242                            
243                                </div>
244                            
245                            </div>
246                    </div>
247                </div>
248            </nav>
249        </div>
250
251    </header>
252</div>
253
254<div class="modal fade" id="contactUsModal" tabindex="-1" aria-labelledby="contactUsModalLabel" aria-hidden="true">
255    <div class="modal-dialog">
256        <div class="modal-content">
257            <!-- <div class="modal-header">
258                <h1 class="modal-title fs-5" id="contactUsModalLabel"> Contact us</h1>
259                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
260            </div> -->
261            <div class="modal-body">
262                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">X</button>
263                <section class="contact_us">
264                    <div class="container ">
265                        <div class="row">
266                            <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
267                                <h1 class="text-center">Contact Us</h1>
268                                <p class="text-center">We're here to help and answer any question you might have.<span class="d-sm-block-custom"> We look forward to hearing from you.</span></p>
269
270                            </div>
271                        </div>
272                        <div class="row  justify-content-center mt-4">
273                            <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12 col-12">
274                                <div class="mb-3">
275                                    <label for="contact_name" class="form-label">
275Name</label>
276                                    <input type="text" class="form-control contact_us-form " id="contact_name" placeholder="">
277                                </div>
278                            </div>
279                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
280                                <div class="mb-3">
281                                    <label for="contact_email" class="form-label">Email Address</label>
282                                    <input type="email" class="form-control contact_us-form " id="contact_email" placeholder="">
283                                </div>
284                            </div>
285                            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12">
286                                <div class="mb-3">
287                                    <label for="contact_phone" class="form-label">Phone</label>
288                                    <div class="mobile-wrap">
289                                        <select class="form-control mobile-code" id="contact_country_code"></select>
290                                        <input type="number" class="form-control contact_us-form mobile-number numbers-only" id="contact_phone" placeholder="" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="16">
291                                    </div>
292                                </div>
293                            </div>
294                            <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12 col-12">
295                                <div class="mb-3">
296                                    <label for="contact_description" class="form-label ">Description</label>
297                                    <textarea class="form-control contact_us-text-area non-common" id="contact_description" rows="5"></textarea>
298                                </div>
299                            </div>
300                            <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12 col-12">
301                                <div class="text-center">
302                                    <button class="btn submit_contact" onclick="sendContactFormData();"><img src="https://snipback.com/assets/images/right-arrow.svg" width="9px"><span>Submit</span></button>
303                                </div>
304                            </div>
305                        </div>
306                    </div>
307                </section>
308            </div>
309            <!-- <div class="modal-footer">
310          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
311          <button type="button" class="btn btn-primary">Save changes</button>
312        </div> -->
313        </div>
314    </div>
315</div>
316
317    <!------------------------------------------>
318<style>
319    @font-face {
320        font-family: 'SF Pro Display';
321        src: url('/fonts/San-Francisco-Pro-Fonts-master/SF-Pro-Display-Regular.otf') format('opentype');
322        font-weight: 400;
323        font-style: normal;
324    }
325    
326    @font-face {
327        font-family: 'SF Pro Display';
328        src: url('/fonts/San-Francisco-Pro-Fonts-master/SF-Pro-Display-Medium.otf') format('opentype');
329        font-weight: 500;
330        font-style: normal;
331    }
332    
333    @font-face {
334        font-family: 'SF Pro Display';
335        src: url('/fonts/San-Francisco-Pro-Fonts-master/SF-Pro-Display-Semibold.otf') format('opentype');
336        font-weight: 600;
337        font-style: normal;
338    }
339    
340    @font-face {
341        font-family: 'SF Pro Display';
342        src: url('/fonts/San-Francisco-Pro-Fonts-master/SF-Pro-Display-Bold.otf') format('opentype');
343        font-weight: 700;
344        font-style: normal;
345    }
346      :root {
347        --red:#e6231f;
348        --red-dark:#b91416;
349        --black:#050505;
350        --ink:#141821;
351        --muted:#667085;
352        --line:#e4e7ec;
353        --soft:#f6f7f9;
354        --card:#ffffff;
355        --blue:#1769ff;
356        --green:#0f9b4e;
357        --purple:#7b3ff2;
358        --orange:#f59e0b;
359        --navy:#07111f;
360      }
361      * { box-sizing:border-box; }
362      html { scroll-behavior:smooth; }
363      body { margin:0; font-family: Inter, Arial, Helvetica, sans-serif; color:var(--ink); background:#fff; }
364      a { color:inherit; text-decoration:none; }
365      .topbar {
366        position:sticky; top:0; z-index:20;
367        height:78px; padding:0 56px; display:flex; align-items:center; justify-content:space-between;
368        background:rgba(5,5,5,.94); border-bottom:1px solid rgba(255,255,255,.08); backdrop-filter:blur(12px);
369      }
370      .logo { height:50px; object-fit:contain; }
371      .nav { display:flex; align-items:center; gap:28px; color:#fff; font-size:14px; font-weight:700; }
372      .nav a { opacity:.86; }
373      .nav .demo { background:var(--red); opacity:1; padding:12px 20px; border-radius:999px; }
374      .nav .login { border:1px solid rgba(255,255,255,.35); opacity:1; padding:11px 18px; border-radius:999px; }
375    
376      .hero {
377        min-height:690px; color:#fff; position:relative; overflow:hidden;
378        background:
379          radial-gradient(circle at 78% 28%, rgba(230,35,31,.23), transparent 18%),
380          radial-gradient(circle at 62% 18%, rgba(23,105,255,.18), transparent 26%),
381          linear-gradient(115deg, rgba(0,0,0,.94), rgba(7,17,31,.94) 52%, rgba(0,0,0,.98));
382      }
383      .hero-inner { position:relative; z-index:2; max-width:1280px; margin:0 auto; padding:82px 40px 58px; display:grid; grid-template-columns:1.02fr .9fr; gap:56px; align-items:center; }
384      .eyebrow { color:var(--red); font-weight:900;text-transform:uppercase; font-size:18px; margin-bottom:7px; }
385      .hero h1 { font-size:70px; line-height:.98; margin:0 0 26px; letter-spacing:-.055em; }
386      .cta { display:flex; gap:14px; flex-wrap:wrap; margin:0 0 30px; }
387      .btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 22px; border-radius:999px; font-weight:900; font-size:15px;}
388      .btn.red { background:var(--red); color:#fff; border-color:var(--red); }
389      .btn.dark { background:#fff; color:#111; border-color:#fff; }
390      .btn.outline { color:#fff; border-color:rgba(255,255,255,.4); background:rgba(255,255,255,.06); }
391      .cap-row { display:flex; gap:18px; flex-wrap:wrap; margin-top:34px; }
392      .cap { min-width:112px; color:#fff; border-left:2px solid rgba(255,255,255,.18); padding-left:12px;font-size: 14px; }
393      .cap .i { margin-bottom:14px; }
394      .cap b { font-size:12px;}
395      .field { position:absolute; inset:0; background:
396        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px) 0 0/58px 100%,
397        repeating-linear-gradient(90deg, #224d23 0 58px, #1f4520 58px 116px); }
398      .field:after { content:""; position:absolute; inset:22px; border:2px solid rgba(255,255,255,.55); border-radius:6px; }
399      .video-ui { position:absolute; left:24px; right:24px; bottom:20px; height:58px; border-radius:14px; background:rgba(0,0,0,.72); display:flex; align-items:center; gap:8px; padding:10px; }
400      .video-ui span { flex:1; height:26px; border-radius:8px; background:var(--red); opacity:.8; }
401      .kit-box { position:absolute; right:34px; bottom:34px; width:270px; border-radius:24px; background:#fff; color:#111; padding:22px; box-shadow:0 18px 45px rgba(0,0,0,.36); }
402      .kit-box b { display:block; font-size:18px; margin-bottom:5px; }
403      .kit-box p { color:#3e4654; font-size:13px; margin:0; line-height:1.35; }
404      .snip-device { position:absolute; right:68px; top:44px; width:130px; height:80px; border-radius:14px; background:#111; border:1px solid #333; box-shadow:0 12px 30px rgba(0,0,0,.35); }
405      .snip-device:before { content:""; position:absolute; left:18px; right:18px; top:22px; height:10px; border-radius:6px; background:var(--red); }
406    
407      .section { padding:70px 142px; }
408      .section .inner { max-width:1240px; margin:0 auto; }
409      .center { text-align:center; }
410      .section h2 { margin:0 0 12px; font-size:40px; line-height:1.08!important; }
411      .section p.lead { margin:0 auto 34px; max-width:950px; color: #000;opacity: 0.7; font-size:18px; line-height:1.48; }
412      .red-word { color:var(--red); }
413    
414      .audience-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
415      .aud-card { background:#fff; border:1px solid #989898; border-radius:20px; padding:2rem 1.5rem; box-shadow:0 14px 34px rgba(16,24,40,.08); display:flex; flex-direction:column; }
416      .aud-card.primary { transform:translateY(-5px); }
417      .aud-top { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
418      .circle { width:44px!important;margin: unset !important; height:44px!important; border-radius:50%!important; display:flex!important; align-items:center; justify-content:center; font-weight:900; color:#fff; background:var(--red); flex:0 0 auto; }
419      .circle.blue { background:var(--blue); } .circle.green { background:var(--green); } .circle.purple { background:var(--purple); }
420      .aud-card .desc { min-height:54px; color:#000000; font-size:13px; line-height:1.35; margin:0 0 14px; }
421      .aud-card ul { padding-left:0; list-style:none; margin:0 0 18px; font-size:13px; color:#2e3541; line-height:1.55; }
422      .aud-card li { display:flex; gap:17px; margin:0px 0;color: #000000; }
423      .aud-card li:before { content:"✓";
423 color:var(--red); font-weight:900; }
424      .aud-card1 li:before { content:"✓"; color:#e6231f!important; font-weight:900; }
425      .aud-card2 li:before { content:"✓"; color:#1769ff!important; font-weight:900; }
426      .aud-card3 li:before { content:"✓"; color:#0f9b4e!important; font-weight:900; }
427      .aud-card4 li:before { content:"✓"; color:#7b3ff2!important; font-weight:900; }
428      
429      .aud-card .link { margin-top:auto; color:var(--red); font-weight:900; font-size:14px; }
430    
431      .workflow-bar { background:#111; color:#fff; border-radius:28px; padding:28px; display:grid; grid-template-columns:repeat(6,1fr); gap:14px; align-items:stretch; box-shadow:0 18px 46px rgba(0,0,0,.16); }
432      .wf { border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:18px 14px; min-height:130px; background:rgba(255,255,255,.045); text-align:center; }
433      .wf .num { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--red); margin:0 auto 12px; font-weight:900; }
434      .wf b { display:block; font-size:14px; margin-bottom:7px; }
435      .wf span { color:#cfd7e5; font-size:12.2px; line-height:1.3; display:block; }
436    
437      .sideline { background:#f6f7f9; }
438      .split { display:grid; grid-template-columns:.86fr 1.14fr; gap:34px; align-items:center; }
439      .tagline { color:var(--red); font-size:13px; text-transform:uppercase; letter-spacing:.14em; font-weight:900; margin-bottom:8px; }
440      .split h2 { font-size:46px; }
441      .bullet-list { list-style:none; padding:0; margin:24px 0 26px; display:grid; gap:13px; }
442      .bullet-list li { display:flex; gap:12px; align-items:flex-start; font-size:16px; line-height:1.35; }
443      .bullet-list li:before { content:"✓"; width:24px; height:24px; border-radius:50%; background:var(--red); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; flex:0 0 auto; font-size:13px; }
444      .field-diagram { position:relative; min-height:420px; border-radius:34px; background:#142b19; box-shadow:inset 0 0 0 8px #202833, 0 24px 60px rgba(16,24,40,.18); overflow:hidden; }
445      .field-diagram .grid { position:absolute; inset:42px 40px; border:4px solid rgba(255,255,255,.78); border-radius:14px;
446        background:repeating-linear-gradient(90deg,#2f7b2f 0 58px,#347f34 58px 116px); }
447      .field-diagram .grid:before { content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px) 0 0/58px 100%; }
448      .zone { position:absolute; border-radius:18px; background:#fff; border:1px solid #dfe4ec; padding:15px; min-width:190px; box-shadow:0 14px 34px rgba(16,24,40,.18); }
449      .zone b { display:block; font-size:14px; margin-bottom:4px; }
450      .zone span { color:#667085; font-size:12px; line-height:1.25; display:block; }
451      .zone.press { top:18px; right:30px; } .zone.end { left:22px; bottom:38px; } .zone.side { right:38px; bottom:40px; }
452    
453      .exchange .lead { color:#ced6e3; }
454      .exchange-cards { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:34px; }
455      .exchange-card ul { padding-left:20px; color:#3a414e; font-size:15px; line-height:1.55; }
456      .exchange-note { margin-top:26px; text-align:center; color:#e5eaf3; font-weight:800; }
457    
458      .zero { background:#fff; }
459      .dark-banner { background:linear-gradient(125deg,#080b12,#111927 55%,#0a0e16); color:#fff; border-radius:34px; padding:44px; display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; overflow:hidden; }
460      .dark-banner p { color:#d8e0ec; font-size:17px; line-height:1.48; }
461      .camera-stack { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
462      .camera-card { background:#fff; color:#111; min-height:150px; }
463      .camera-card .iconcam { width:64px; height:64px; border-radius:18px; background:#eef2f7; margin-bottom:12px; position:relative; }
464      .camera-card .iconcam:after { content:""; position:absolute; width:28px; height:28px; border-radius:50%; background:#111; left:18px; top:18px; box-shadow:inset 0 0 0 8px #535c6b; }
465      .camera-card b { display:block; margin-bottom:4px; }
466    
467      .features { background:#f6f7f9; }
468      .feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
469      .feature { background:#fff; border:1px solid var(--line); border-radius:26px; padding:24px; box-shadow:0 12px 28px rgba(16,24,40,.07); min-height:260px; display:flex; flex-direction:column; }
470      .mock-screen { height:120px; border-radius:18px; background:#0c111a; margin-bottom:20px; position:relative; overflow:hidden; }
471      .mock-screen:before { content:""; position:absolute; inset:18px; background:linear-gradient(90deg,var(--red) 0 24%, #293141 24% 44%, var(--red) 44% 62%, #293141 62%); border-radius:8px; }
472      .feature h3 { margin:0 0 9px; font-size:22px; }
473      .feature p { color:#566174; line-height:1.45; font-size:15px; margin:0 0 18px; }
474      .feature .learn { margin-top:auto; font-weight:900; color:var(--red); }
475    
476      .sports { background:#fff; }
477      .sport-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-top:24px; }
478      .sport { background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 8px; text-align:center; font-weight:900; font-size:13px; box-shadow:0 8px 18px rgba(16,24,40,.04); }
479    
480      .customers { background:#f6f7f9; }
481      .logo-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; margin-top:28px; }
482      .school-logo { height:74px; border:1px solid var(--line); background:#fff; border-radius:16px; display:flex; align-items:center; justify-content:center; font-weight:900; color:#2e3541; text-align:center; font-size:13px; padding:8px; }
483      .testimonials { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:36px; }
484      .quote { background:#fff; border-radius:24px; padding:32px; border:1px solid var(--line); font-size:18px; line-height:1.45; color:#2f3745; }
485      .quote b { color:#111; display:block; margin-top:18px; font-size:14px; }
486    
487      .pricing-cta { background:#111; color:#fff; }
488      .pricing-card { background:#fff; color:#111; border-radius:30px; padding:36px; display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
489      .price-list { display:grid; gap:12px; }
490      .price-item { display:flex; justify-content:space-between; gap:20px; background:#f8fafc; border-radius:16px; padding:16px; font-weight:800; }
491      .price-item span:last-child { color:var(--red); }
492    
493      .footer { background:#050505; color:#fff; padding:56px 44px; }
494      .footer .inner { max-width:1240px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
495      .footer img { height:54px; }
496      .footer p { color:#c9d1df; line-height:1.45; }
497      .footer .right { display:flex; justify-content:flex-end; gap:18px; flex-wrap:wrap; }
498      .footer .right a { color:#dce4f2; font-weight:800; }
499    
500      @media (max-width:980px) {
501        .topbar { padding:0 22px; } .nav { display:none; }
502        .hero-inner, .split, .dark-banner, .pricing-card, .footer .inner { grid-template-columns:1fr; }
503        .hero h1 { font-size:48px; }
504        .audience-grid, .exchange-cards, .feature-grid, .logo-grid, .testimonials, .sport-grid { grid-template-columns:1fr; }
505        .workflow-bar { grid-template-columns:1fr 1fr; }
506        .section { padding:52px 22px; }
507      }
508
509    container.app.parent.docked.opened .chatstack-app.parent, #chatstack-container.app.parent.floating.opened .chatstack-app.parent {
510        right: 52px;
511        bottom: 82px;
512        height: 79vh !important;
513    }
514    .customer_stories .custom-quotes{
515        margin-top:57px !important;
516    }
517    .save-org-playbook-email {
518        background: #E93D29 !important;
519        color: #fff !important;
520        margin-top: 10px;
521        padding: 5px 30px !important;
522    }
523    .pl-email-err {
524        width: 100%;
525        float: left;
526        margin-top: 5px;
527        font-size: 14px;
528        color: #E93D29;
529    }
530
531    
532    @font-face {
533      font-family: 'SF Pro Display';
534      src: url('/fonts/SF-UI-Display-Regular.ttf') format('opentype');
535      font-weight: 400;
536      font-style: normal;
537    }
538    @font-face {
539      font-family: 'SF Pro Display';
540      src: url('/fonts/SFPRODISPLAYBOLD.OTF') format('opentype');
541      font-weight: 700;
542      font-style: normal;
543    }
544    body{
545        font-family: 'SF Pro Display', sans-serif!important;
546        }   
547    .film-capture-inner{
548        font-family: 'SF Pro Display', sans-serif;
549    }
550    
551    .capture_font1{
552       font-size:30px!important;
553       font-weight:bold!important;
554       font-family: 'SF Pro Display', sans-serif!important;
555    }
556    .capture_font2{
557       font-family: 'SF Pro Display', sans-serif!important;
558       font-size:20px!important;
559       font-weight:bold!important;
560    }
561    .capture_font3{
562       font-size:35px!important;
563    }
564    .capture_font4{
565       font-size:20px!important;
566    }
567    .carousel-indicators .active{
568        background:red;
569        border-radius:50px!important;
570        width: 10px!important;
571    }
572
573    .film_box2_price{
574        font-size:20px;
575    }
576    .custom_tab_btn{
577        color:#000;
578        margin: 0.5rem 5px;
579        border-radius: 10px !important;
580        border:2px solid #a1a1a1!important;
581        padding: 0.9rem 3rem;
582        font-family: 'SF Pro Display', sans-serif;
583    }
584     
585    .exchange_box {
586        position: relative;
587        margin-bottom: 1rem;
588        border-radius: 26px;
589        padding: 1rem;
590        background: #fff;
591    }
592    img.direction-arrow1 {
593    position: absolute;
594    right: -67px;
595    top: 48px;
596    }
597    img.direction-arrow2 {
598        position: absolute;
599        right: -67px;
600        top: 0px;
601    }
602    img.direction-arrow3 {
603        position: absolute;
604        right: 100px;
605        top: 48px;
606    }
607    img.direction-arrow4 {
608        position: absolute;
609        right: 100px;
610        top: 0px;
611    }
612    img.direction-arrow5 {
613    
614        position: absolute;
615        bottom: -59px;
616        left: 50px;
617    }
618    img.direction-arrow6 {
619    position: absolute;
620    bottom: 100px;
621    left: 50px;
622    }
623    .tab-section-wrap{
624        padding:4.625rem 0 0 0;
625    }
626    .happy_customer {
627        margin-top: unset;
628    }
629    .divider{
630        width: 1px;
631        height: 14.688rem;
632        background-color: #fff;
633    }
634    .img_fluid_custom{
635        max-width: 14rem;
636        object-fit: contain;
637        width: 100%;
638        vertical-align: middle;
639    }
640    .case-study .case-study-outer .case-study-inner .case-study-demo .main-image {
641        min-height: 18.563rem;
642    }
643    .case-study .case-study-outer {
644        background-image: none!important;
645    }
646    .capture_content{
647        color: #86868B;
648    }
649    .capture_content_span{
650        font-weight:600;
651        color:#000;
652    }
653    .main-heading.lg{
654        margin-bottom: 4.75rem !important;
655    }
656    .film-capture-inner .content{
657        padding: 0 3rem;
658    }
659    /* .banner_rich{
660        min-height: 100vh!important;
661    } */
662    
663    @media  screen and (max-width: 720px) {
664    .direction-arrow1,.direction-arrow2,.direction-arrow3,.direction-arrow4,.direction-arrow5,.direction-arrow6{
665           display: none;
666    }
667    .capture_font2{
668        font-size: 15px !important;
669    }
670    .capture_font4 {
671       font-size: 15px !important;
672    }
673    .common_font_size p {
674       font-size: 15px !important;
675       text-align: center;
676    }
677    .film-capture-inner .content {
678        padding: 0 1rem;
679    }
680    .flick-dot{
681        margin: 5px 0px;
682    }
683    .capture_font1 {
684    font-size: 25px !important;
685     }
686     .film-review{
687        padding:2rem!important;
688     }
689     footer .footer-outer .footer-inner {
690        padding: 3rem 1rem !important;
691    }
692    #capture_img img{
693        height: 200px!important;
694    }
695    .main-heading.lg {
696        margin-bottom: 2.75rem !important;
697    }
698    .pool_share_head {
699        font-size: 1.5rem !important;
700    }
701    }
702    
703    @media  screen and (max-width: 720px) {
704        .mobile-ex{
705            display: contents;
706        }
707        .pool_share_head{
708            text-align:center;
709        }
710    
711        .menu_link.active {
712            padding: 6px 1.55rem !important;
713            border-radius: 10px;
714        }
715        .offcanvas-body .btn-white{
716            padding: 6px 1.55rem !important;
717        }
718    
719        /* .hero-banner .hero-banner-outer .hero-banner-inner .banner-content .btn-wrap .btn-outline-white:hover{
720            background-color:unset!important;
721            border-color:unset!important;
722        } */
723    }
724    
725    
726        @media  screen and (max-width: 870px) {
727        .custom_tab_btn{
728            margin: 0px 5px 3px 5px;
729            padding: 0.9rem 1rem;
730        }
731    }
732    @media  screen and (max-width: 1000px) {
733      .capture_bottom_box{
734        width: 100%;
735        display:flex;
736        justify-content:center;
737      }
738      .text-center-capture{
739        text-align:center;
740      }
741      .divider{
742    display: none;
743    }
744    }
745    @media  screen and (min-width: 1200px) {
746        .custom_tab_btn {
747        padding: 0.9rem 5.4rem;
748    }
749    }
750    @media  screen and (max-width: 500px) {
751    
752    .case-study .case-study-outer .case-study-inner .case-study-demo .main-image{
753        min-height:unset!important;
754    }
755    }
756    @media  screen and (min-width:720px) {
757        .happy_customer h3{
758        font-weight: bold !important;
759    }
760    .happy_customer h4 {
761        font-weight: bold !important;
762        font-size: 30px !important;
763    }
764    /* .customer_name {
765        font-size: 20px !important;
766    } */
767    .customer_stories{
768        font-family: 'SF Pro Display', sans-serif!important;
769    }
770    /* .customer_stories .card p{
771        font-size:25px!important;
772    } */
773    }
774    .img_wrap_college img{
775        height: 8rem!important;
776    }
777    .img_wrap_college_wrap img{
778        height: 7rem!important;
779    }
780    @media (min-width: 700px) and (max-width: 1100px) {
781        .testimonial_img_wrap img{
782            height: 5rem!important;
783        }
784    }
785    .LiveHelpButton{
786       display:none;
787    }
788    .happy_customer {
789        font-family: 'SF Pro Display', sans-serif!important;
790    }
791    .btn-outline-white a {
792        text-decoration: none !important;
793        color: #fff !important;
794    }
795    /* .contact-us-form-wrap .mobile-code {
796        height: 38px;
797    } */
798    .submit_contact .icon-plus {
799        margin-right: 12px !important;
800        width: .9rem;
801        height: .7rem;
802        margin-bottom: 3px !important;
803    }
804    .testimonial_img_wrap{
805            padding: .2rem!important;
806        }
807    /* .middle-side-image-wrap .magnify{
808        width: 90%;
809    } */
810     .btn-wrap .btn-outline-white{
811        width: 9rem !important;
812        border-radius: 30px !important;
813     }
814     .custom_footer_wrap_btn .btn-outline-white{
815        width: 9rem !important;
816        border-radius: 30px !important;
817     }
818      .custom_footer_wrap_btn .btn-outline-white-custom{
819        color: #fff !important;
820        border: 1px solid #fff !important;
821        width: 14rem !important;
822        border-radius: 30px !important;
823     }
824     .custom_wrap_modal{
825        padding-right: unset !important;
826     }
827     .newFooterSection .social-media-btn .icon-youtube {
828        background-position: bottom;
829        background-size: auto 11px;
830     }
831     .custom_footer_wrap_btn{
832        display:flex;
833     }
834     @media (max-width: 991.98px) {
835        header .header-wrap-inner .buttons {
836            margin-top: unset !important;
837        }
838        .common_font_size{
839        padding-left: 1.5rem;
840    }
841    }
842    .common_font_size p{
843        font-size:20px!important;
844    }
845    .common_font_size{
846        padding-left: unset;
847    }
848    .card.flick-dot.p-3.active{
849        border:1px solid #D1231A;
850    }
851    @media (min-width: 1010px) and (max-width: 1188px) {
852        .common_font_size p {
853          font-size: 15px !important;
854       }
855    }
856    @media (max-width: 1000px) {
857        .common_font_size{
858        padding-left: 1.5rem;
859    }
860    }
861    
862    
863    .hero-banner .hero-banner-outer .hero-banner-inner .banner-content .btn-wrap .btn-outline-white:hover {
864        background-color: unset !important;
865        border-color: unset !important;
866        color: #fff;
867        transition-property: 
867background-color, border, font-size, transform, color, padding, display, margin, height, opacity, visibility, opacity;
868        transition-timing-function: ease-in-out;
869        transition-duration: 1s;
870    }
871    .img_wrap_college img {
872        height: 8rem !important;
873    }
874    .img_wrap_college_wrap img {
875        height: 7rem !important;
876    }
877    .club_custom_img img{
878        height: 6rem;
879    }
880    </style>
881    <style>
882    .page-wrapper header#navbar #navbarSupportedContent .menu_link.active {
883        color: #fff !important;
884    }
885    
886    .zero-setup-card {
887      background-size: cover;
888      background-position: center;
889      background-repeat: no-repeat;
890      border-radius: 12px;
891      color: #fff;
892      padding: 40px 20px;
893      min-height: 70vh;
894      margin: 23px auto;
895      display: flex;
896      align-items: center;
897      justify-content: center;
898      text-align: center;
899    }
900    .zero-setup-card-custom-wrp{
901      justify-content: start;
902      text-align: start;
903      padding-left: 6rem;
904    
905    }
906    .zero-setup-card1{
907      background-image: url('https://snipback.com/assets/images/home/football-banner.webp');
908    }
909    .zero-setup-card2{
910      background-image: url('https://snipback.com/assets/images/home/soccer.png');
911    }
912    .zero-setup-card3{
913      background-image: url('https://snipback.com/assets/images/home/basketball.png');
914    }
915    .zero-setup-card4{
916      background-image: url('https://snipback.com/assets/images/home/hockey.png');
917    }
918    .zero-setup-card5{
919      background-image: url('https://snipback.com/assets/images/home/volleyball.png');
920    }
921    .zero-setup-card6{
922      background-image: url('https://snipback.com/assets/images/home/lacrosse.png');
923    }
924    .intro{
925        font-size:25px!important;
926        font-weight: bold !important;
927        color:#E1261C;
928    }
929    .intro-head{
930        font-weight: bold !important;
931        color: #000000;
932    }
933    .intro-head1{
934        font-weight: 300 !important;
935        color: #000000;
936    }
937    .zero-setup-card-content-head{
938        font-weight: bold !important;
939        line-height: 1 !important;
940    }
941    .zero-setup-card-content-head-wrap-custom{
942            font-size: 52px !important;
943    }
944    .zero-setup-h5{
945        font-weight: 300 !important;
946        color: #FFDD00;
947        padding-bottom: 2.5rem;
948        padding-top: 1rem;
949    }
950    .zero-setup-h5-wrap-custom{
951        font-size: 30px !important;
952        font-weight: 600 !important;
953        color: #ffffff;
954        padding-bottom: 2.5rem;
955        padding-top: 1rem;
956    }
957    .zero-setup-h4{
958        font-size:16px!important;
959        font-weight: 300 !important;
960    }
961    .zero-setup-card-content-head-custom{
962        font-weight: bold !important;
963        padding-top: 3rem;
964    }
965    .zero-setup-italic{
966        color: #000;
967        font-style: italic;
968    }
969    .card-custom-zero{
970        padding:3rem;
971        box-shadow: 0px 30px 60px #00000029;
972        border-radius: 20px;
973    }
974    .text-left-zero{
975        text-align: left;
976         color: #000;
977    }
978    .sm-device-img {
979      display: none;
980    }
981    .zero-br-mobile{
982        display: none;
983    }
984    .btn-zero-setup {
985      background-color: #e1261c;
986      color: #fff;
987      border: none;
988      border-radius: 8px;
989      padding: 12px 24px;
990      font-size: 16px;
991      font-weight: 600;
992      cursor: pointer;
993      transition: all 0.3s ease;
994      line-height: 1.3;
995    }
996    .btn-zero-wrap{
997        padding-bottom: 1.5rem;
998    }
999    .tabs-wrapper {
1000        margin: auto;
1001        text-align: center;
1002    }
1003    
1004    /* TAB BUTTONS */
1005    .tabs-buttons {
1006    
1007        gap: 15px;
1008        margin-bottom: 25px;
1009    }
1010    
1011    .tabs-wrapper .tab-btn {
1012        padding: 0.5rem 5.5rem;
1013        margin:0 1.5rem;
1014        border: 2px solid #707070!important;
1015        border-radius: 10px!important;
1016        background-color: #fff!important;
1017    }
1018    
1019    .tabs-wrapper .tab-btn.active {
1020        background-color:#fff!important;
1021        color: #E1261C;
1022    }
1023    
1024    .tabs-wrapper .tab-content {
1025        display: none;
1026    }
1027    
1028    .tabs-wrapper .tab-content.active {
1029        display: block;
1030    }
1031    
1032    
1033    
1034    @media (max-width: 720px) {
1035       
1036     .intro {
1037        font-size: 20px !important;
1038     }
1039     .intro-head {
1040        font-size: 24px !important;
1041        padding-left: 0.1rem;
1042        padding-right: 0.1rem;
1043    }
1044    .intro-head1 {
1045        font-weight: 300 !important;
1046        color: #000000;
1047        font-size: 16px !important;
1048        text-align: left !important;
1049        padding-left: 1.3rem;
1050        padding-right: 1.3rem;
1051    }
1052    .zero-setup-card-content-head {
1053        font-size: 25px !important;
1054    }
1055    .zero-setup-h5 {
1056        font-size: 15px !important;
1057    }
1058    .zero-setup-h4 {
1059        font-size: 17px !important;
1060    }
1061    .zero-setup-card-content-head-custom {
1062        font-size: 22px !important;
1063        padding-top: 1rem;
1064    }
1065    .img-setup{
1066        width: 75%;
1067    }
1068    .img-conference{
1069        padding-bottom: 1.4rem;
1070        padding-top: 1rem;
1071    }
1072    .zero-br{
1073        display: none;
1074    }
1075    .zero-setup-card {
1076        background-size: cover!important;
1077    }
1078    .zero-setup-italic {
1079        font-size: 14px !important;
1080        text-align: left !important;
1081        padding-left: 1.3rem;
1082        padding-right: 1.3rem;
1083    }
1084    .card-custom-zero {
1085        padding: unset;
1086    }
1087    .card-custom-zero .card-body{
1088        padding: 1rem 1.3rem;
1089    }
1090    .img-zero-setup{
1091        text-align: center!important;
1092    }
1093    .zero-setup1{
1094        font-size: 15px !important;
1095    }
1096    .zero-setup2{
1097        padding-top: 0.5rem;
1098        padding-bottom: 0.5rem;
1099    }
1100    .zero-setup-cost{
1101        font-size: 14px !important;
1102        padding-left: 1.3rem;
1103        padding-right: 1.3rem;
1104    }
1105    .zero-setup-cost-head{
1106        font-size: 25px !important;
1107        padding-left: 1.3rem;
1108        padding-right: 1.3rem;
1109    }
1110    .sm-device-img {
1111        display: block;
1112    }
1113    .sm-device-img img{
1114         width: 100%;
1115    }
1116    .zero-br-mobile{
1117        display: block;
1118    }
1119    .zero-setup-card-custom-wrp {
1120        background-position: -408px 10px;
1121    }
1122    .faq-toggle-cpy {
1123        font-size: 11px;
1124    }
1125    button#faqBtn {
1126        font-size: 13px;
1127    }
1128    }
1129    @media (max-width: 1200px) {
1130    .zero-setup-card {
1131      background-size: contain;
1132    }
1133    .tabs-wrapper .tab-btn{
1134          margin: 0.4rem 0;
1135    }
1136    .magnify>.magnify-lens {
1137        width: 200px;
1138        height: 200px;
1139    }
1140    .zero-setup-card-custom-wrp {
1141        justify-content: center;
1142        text-align: center;
1143        padding-left: unset;
1144    }
1145    .accordian-inner-wrap2{
1146        padding: 0;
1147    }
1148    .accordian-inner-wrap3{
1149        padding: 0;
1150    }
1151    .faq-toggle-cpy {
1152        font-size: 11px;
1153    }
1154    button#faqBtn {
1155        font-size: 13px;
1156    }
1157    }
1158    
1159    .faq-content {
1160      display: none;
1161      margin-top: 10px;
1162    }
1163    
1164    .faq-toggle{
1165      background: none;
1166      border: none;
1167      font-size: 16px;
1168      cursor: pointer;
1169      font-weight: 600;
1170    }
1171    button#faqBtn {
1172        padding: 0.6rem 1.8rem;
1173        border: 2px solid #FFFFFF;
1174        border-radius: 28px;
1175        color: #ffffff;
1176        font-size: 16px;
1177        font-weight: 500;
1178        background-color: #262717;
1179    }
1180    .faq-toggle-cpy {
1181        padding: 0.7rem 1.5rem;
1182        border: 2px solid #FFFFFF;
1183        border-radius: 28px;
1184        color: #ffffff;
1185        font-size: 17px;
1186        font-weight: 500;
1187        background-color: #262717;
1188    }
1189    
1190    
1191    .accordion {
1192      margin: 40px auto;
1193    }
1194    
1195    /* GAP BETWEEN ACCORDIONS */
1196    .acc-item {
1197      margin-bottom: 16px; 
1198      border-radius: 8px;
1199      overflow: hidden;      /* header & body stay connected */
1200    }
1201    
1202    /* HEADER */
1203    .acc-header {
1204      width: 100%;
1205      padding: 25px 16px 25px 16px;
1206      background: #f4f4f4;
1207      color: #000;
1208      border: none;
1209      display: flex;
1210      justify-content: space-between;
1211      cursor: pointer;
1212      font-size: 16px;
1213      border-radius: 15px 15px 0px 0px !important;
1214      font-size: 21px;
1215      font-weight: 500;
1216      text-align: start;
1217      font-family: roboto;
1218    }
1219    
1220    /* BODY */
1221    .acc-body {
1222      text-align: start;
1223      height: 0;
1224      overflow: hidden;
1225      transition: height 0.3s ease;
1226      background: #f4f4f4;
1227      padding: 0 16px;
1228    }
1229    
1230    /* ACTIVE STATE */
1231    .acc-item.active .acc-body {
1232      padding: 0px 16px  16px  16px;
1233    }
1234    
1235    /* ICON ROTATE */
1236    .icon {
1237      transition: transform 0.3s ease;
1238    }
1239    
1240    .acc-item.active .icon {
1241      transform: rotate(90deg);
1242    }
1243    .faq-content-header {
1244        font-size: 40px !important;
1245        font-weight: 600 !important;
1246        color: #000000;
1247        text-align: start;
1248        padding-left: 28px;
1249    }
1250    .acc-body p{
1251        color: #000000;
1252    }
1253    button.custom-basket-btn {
1254        border: 2px solid #CE2027;
1255    }
1256    button.custom-basket-btn {
1257        margin-top: 1.5rem;
1258        margin-bottom: 1.5rem;
1259        border: 2px solid #CE2027;
1260    }
1261    .accordian-inner-wrap {
1262        display: flex;
1263        padding-top: 1rem;
1264        border-radius: 18px;
1265        background-color: #272727;
1266        color: #fff;
1267    }
1268    
1269    .custom-accordian-btn{
1270        height: 100%;
1271        padding-top: 1rem;
1272        padding-left: 0.5rem;
1273        padding-right: 0.5rem;
1274        border-radius: 18px;
1275        background-color: #272727;
1276        color: #fff;
1277    }
1278    .custom-fluid {
1279        position: relative;
1280        width: 100px;
1281        height: 100px;
1282    }
1283    span.clr-blk {
1284        color: #000;
1285    }
1286    h6.highlight-blck {
1287        color: #000;
1288    }
1289    p.accordian-footer-wrap {
1290        font-size: 1.3rem !important;
1291        line-height: 1.5;
1292        font-weight: 600;
1293        color: #000;
1294    }
1295    .faq-content{
1296        box-shadow: 0px 30px 60px #00000029;
1297        border-radius: 20px;
1298        padding: 1rem 1rem 1rem 1rem;
1299        margin-bottom: 3rem;
1300    }
1301    .zero-setup-card-img{
1302        position: relative;
1303        top: -19px;
1304        width: 8rem;
1305    }
1306    .accordian-inner-wrap2{
1307        margin-top: 1px;
1308        margin-bottom: 1px;
1309    }
1310    </style>
1311    <style>
1312    
1313        section {
1314          margin-bottom: 2.625rem;
1315        }
1316        .left-border-line{
1317            padding: 1rem!important;
1318            border-left: 2px solid #d3d3d3!important;
1319        }
1320        .left-border-line h3{
1321           font-size: 1.2rem !important;
1322           font-weight: 700 !important;
1323        }
1324        .left-border-line img{
1325            width: 1.5rem;
1326            margin-bottom: 1rem!important;
1327        }
1328        .wokflow-head{
1329            font-weight: 700 !important;
1330        }
1331        .platform-column-wrap{
1332            border-left: 1px solid #2a2a2a;
1333        }
1334        .platform-wrap {
1335            padding: 2rem;
1336        }
1337        .platform-wrap img {
1338             width: 24px;
1339             margin-bottom: 1rem;
1340        }
1341        .platform-wrap h3{
1342            font-size: 1.2rem !important;
1343        }
1344        .platform-row-wrap{
1345            padding: 0 6rem;
1346        }
1347        .platform-header{
1348            line-height: 1 !important;
1349            margin-bottom: 2.5rem;
1350        }
1351        section h1{
1352            font-weight: bold !important;
1353            font-size: 2.2rem !important;
1354            letter-spacing: unset!important;
1355        }
1356        .sideline-paragraph1,.sideline-paragraph2{
1357            margin-bottom: 0px;
1358            line-height: 1.3;
1359        }
1360        .sideline-paragraph1{
1361            font-weight: 600;
1362        }
1363        .sideline-paragraph2{
1364            font-size: 12px !important;
1365        }
1366    
1367        .sideline-card-wrap {
1368           display: flex;
1369        }
1370        .sideline-card-wrap img{
1371            width: 23px;
1372            margin-right: 16px;
1373        }
1374        .sideline-card-wrap {
1375            display: flex;
1376            padding: 1rem 0 0.3rem 0;
1377            border-bottom: 1px solid #707070;
1378        }
1379        .sideline-differ-wrap img{
1380            width: 2rem;
1381            margin-bottom: 1rem;
1382        }
1383        .sideline-differ-wrap h3{
1384            font-size: 1.2rem!important;
1385        }
1386        .sideline-differ-column{
1387            padding:0.5rem 1.56rem 0.5rem 1.5rem;
1388        }
1389        .sideline-differ-column h2{
1390            display: flex;
1391            align-items: center;
1392        }
1393        .sideline-differ-button{
1394            background: #0000;
1395            color: #fff;
1396            border-radius: 0.8rem !important;
1397            border: 1px solid #EBE8E8;
1398            font-size: 17px;
1399            padding: 0.6rem 1.5rem;
1400        }
1401        .exchange-card {
1402            background: #fff;
1403            color: #111;
1404            padding: 28px;
1405            box-shadow: 0px 30px 60px #00000029;
1406            border: 1px solid #9A9999;
1407            border-radius: 30px;
1408         }
1409           .exchange-card .badge { 
1410                color: #000;
1411                padding: 8px 17px;
1412                border-radius: 1.875rem !important;
1413                font-size: 12px;
1414                font-weight: 600 !important;
1415                margin-bottom: 14px;
1416                border: 2px solid #E1261C;
1417            }
1418            .exchange-card h3 { 
1419                margin:0 0 0px; 
1420                font-size: 24px !important;
1421                font-weight: 700 !important;
1422            }
1423            .parent-wrap-div{
1424                display: flex;
1425            }
1426             .sideline-card-wrap-custom{
1427                border-bottom:none!important;
1428             }
1429             .trade {
1430                display:flex;
1431                justify-content: start;
1432                background: #000000;
1433                border-radius: 16px;
1434                padding: 16px;
1435                font-size: 14px;
1436                color: #fff;
1437                margin-top: 18px;
1438             }
1439             .exchange-footer{
1440                border: 1.5px solid #000000;
1441                border-radius: 0.8rem !important;
1442                color: #000000 !important;
1443                font-size: 15px;
1444                padding: 0.6rem 4rem !important;
1445                font-weight: 600;
1446             }
1447            .football-sec-banner {
1448                background-image:url('https://snipback.com/assets/images/home/football-ban.png');
1449                min-height: 60vh;
1450                background-size: cover;
1451                background-position: center;
1452                background-repeat: no-repeat;
1453                padding: 16rem 10rem;
1454                color: #fff;
1455                position: relative;
1456            }
1457            .vertical-line {
1458                width: 3px;
1459                height: 26px;
1460                background-color: #d3d3d3;
1461                margin: 0px 7.5rem;
1462            }
1463            .footbal-sec-wrap-section{
1464                position: absolute;
1465                left: 0;
1466                bottom:0;
1467                width: 100%;
1468                padding: 1rem 0;
1469                background: #000;
1470                display: flex !important;
1471                justify-content:center;
1472                align-items: center;
1473            }
1474            .football-sec-button1{
1475                border: 2px solid #E1261C;
1476                border-radius: 11px !important;
1477                background: #E1261C !important;
1478                color: #fff;
1479                padding: 0.5rem 1rem;
1480                font-size: 14px;
1481            }
1482            .football-sec-button2{
1483                border: 2px solid #000000;
1484                border-radius: 11px !important;
1485                background: #000000 !important;
1486                color: #fff;
1487                padding: 0.5rem 1rem;
1488                font-size: 14px;
1489            }
1490    
1491            .btn-whole-wrap button{
1492                border: 2px solid #000000;
1493                border-radius: 11px !important;
1494                background: #fff !important;
1495                color: #000;
1496                padding: 0.5rem 1rem;
1497                font-size: 14px;
1498            }
1499            .trade img{
1500                width:39px;
1501                margin-right: 2rem;
1502            }
1503            .aud-card h3 {
1504              font-size: 1rem !important;
1505              font-weight: 600 !important;
1506              margin:0; 
1507              line-height:1.15;
1508            }
1509            .aud-card .desc {
1510                font-size: 13px !important;
1511            }
1512            .section h2 {
1513             font-weight: 600 !important;
1514            }
1515            .hero{
1516             
1517                background: radial-gradient(circle at 50% 10%, #1B2B4D 0%, #172031 25%, rgba(20, 23, 28, 0.95) 55%, transparent 75%), radial-gradient(circle at left center, rgba(50, 28, 33, 0.95) 0%, rgba(50, 28, 33, 0.5) 35%, transparent 70%), radial-gradient(circle at bottom center, rgba(50, 28, 33, 0.85) 0%, transparent 60%), #0A0D14; 
1518            }
1519            .custom-btn-1{
1520                border: 2px solid #5c5c5c !important;
1521                border-radius: 11px !important;
1522                background: transparent !important;
1523                color: #fff !important;
1524                padding: 0.4rem 1.5rem !important;
1525                font-size: 14px !important;
1526                display: flex;
1527                justify-content: center;
1528                align-items: center;
1529            }
1530            .custom-btn-2{
1531                border: 2px solid #E1261C!important;
1532                border-radius: 11px !important;
1533                background: #E1261C !important;
1534                color: #fff!important;
1535                padding: 0.4rem 1.5rem !important;
1536                font-size: 14px!important;
1537                display: flex;
1538                justify-content: center;
1539                align-items: center;
1540            }
1541
1542                .banner-content-1{
1543                    font-size: 2.3rem!important;
1544                    font-weight: 700!important;
1545                    line-height: 1!important;
1546                    color: #FF3B30!important;
1547                    margin: 0 0 5px!important;
1548                    letter-spacing: -1px!important;
1549                }
1550                .banner-content-2{
1551                    font-size: 2.5rem!important;
1552                    font-weight: 700!important;
1553                    line-height: 1.08!important;
1554                    color: #FFFFFF!important;
1555                }
1556               .btn-wrap .btn-outline-white {
1557                    width: auto !important;
1558                    border-radius: 11px !important;
1559                    padding: .5rem 1.25rem !important;
1560                }
1561                .btn-wrap .btn-outline-white {
1562                    color: #5c5c5c !important;
1563                    border: 2px solid #5c5c5c !important;
1564                }
1565    
1566                .hero-banner .hero-banner-outer .hero-banner-inner .banner-content p {
1567                    margin-bottom: 1rem!important;
1568                    margin-top: 1rem!important;
1569                    color: #7A7A7A;
1570                }
1571                .btn-outline-white a {
1572                    font-size: 0.9rem !important;
1573                }
1574                .h2, h2 {
1575                    font-size: 2rem !important;
1576                }
1577                .hero p { 
1578                    font-size: 20px;
1579                    max-width: 690px;
1580                    color: #80787b;
1581                    margin: 0 0 24px;
1582                    line-height: 1.3;
1583                    font-family: 'SF Pro Display', sans-serif;
1584                 }
1585                 .cap .i img{
1586                    width:20px;
1587                 }
1588                 .aud-top img{
1589                    width:15px;
1590                 }
1591                 .sideline-differ-column p{
1592                    line-height: 1.2rem !important;
1593                    font-size: 1rem !important;
1594                    opacity: .7;
1595                 }
1596                 .page-wrapper header#navbar #navbarSupportedContent .menu_link.active
1597                 {
1598                    background: none!important;
1599                    border: none!important;
1600                    color: #e1261c!important;
1601                 }
1602                 .page-wrapper header#navbar #navbarSupportedContent a.menu_link.nav-link {
1603                    font-size: 13px !important;
1604                }
1605                .page-wrapper header#navbar #navbarSupportedContent .menu_link.active {
1606                    padding: 2px .5rem !important;
1607                }
1608                /* .page-wrapper header#navbar #navbarSupportedContent a {
1609                    line-height: .5rem !important;
1610                } */
1611                .menu_link {
1612                    padding: 3px 9px !important;
1613                }
1614                .page-wrapper header#navbar #navbarSupportedContent .profileSec a.nav-link {
1615                    padding: 0.2rem 1.7rem !important;
1616                    border-radius: 10px !important;
1617                    font-size: 13px !important;
1618                }
1619                .page-wrapper header#navbar .header-wrap-inner .navbar-nav {
1620                    gap: 1rem;
1621                }
1622                .section-capture p{
1623                    color: #525252;
1624                }
1625    
1626                .school-align{
1627                    align-self: center;
1628                }
1629                .testimonial_img_wrap{
1630                    width: 85px;
1631                }
1632                .testimonial_img_wrap img{
1633                    width: 55px;
1634                }
1635    
1636                .happy_customer h4 {
1637                    margin-bottom: unset;
1638                }
1639                .main-carousel{
1640                    width: 50%;
1641                }
1642                @media (min-width: 1200px) {
1643                .testimonial_img_wrap {
1644                    height: 80px;
1645                }
1646               }
1647               @media  screen and (min-width: 720px) {
1648    
1649                .happy_customer h4 {
1650                    font-weight: bold !important;
1651                    font-size: 14px !important;
1652                }
1653            }
1654            @media (min-width: 400px) {
1655                .testimonial_img_wrap, .testimonial_img_wrap_custom .testimonial_img_wrap {
1656                    height: 85px;
1657                    padding: .75rem;
1658                }
1659            }
1660            @media (max-width: 1100px) {
1661                .main-carousel{
1662                    width: 100%;
1663                }
1664            }
1665    
1666            .logo-grid{
1667            display:grid;
1668            grid-template-columns:repeat(4,1fr)!important;
1669            gap:6px;
1670            }
1671            
1672            .logo-card{
1673                width:110px;
1674                height:110px;
1675                border:1px solid #707070;;
1676                border-radius:18px;
1677                display:flex;
1678                align-items:center;
1679                justify-content:center;
1680                background:#fff;
1681            }
1682            
1683            .logo-card img{
1684                max-width:70%;
1685                max-height:70%;
1686            }
1687                
1688    
1689            .section-title{
1690            font-size:48px;
1691            font-weight:700!important;
1692            margin-bottom:40px;
1693        }
1694        
1695        .quote-icon{
1696            font-size:120px;
1697            line-height:1;
1698            font-weight:bold;
1699        }
1700        
1701        .testimonial-item p{
1702            font-size:22px;
1703            line-height:1.6;
1704            color:#333;
1705        }
1706        
1707        .testimonial-item h5{
1708            margin-top:25px;
1709            font-weight:700;
1710        }
1711        .testimony-column{
1712            padding-left: 4rem;
1713        }
1714        .custom-section-title{
1715            margin-bottom: 10px;
1716        }
1717        section.testimonial-section {
1718        margin-top: 6rem;
1719        }
1720        .btn-whole-wrap button {
1721            border: 2px solid #dfdfdf;
1722            border-radius: 11px !important;
1723            background: #fff !important;
1724            color: #000;
1725            padding: 0.5rem 1rem;
1726            font-size: 16px;
1727            font-weight: 700;
1728        }
1729        .footer-section{
1730            background:#1E1E1E;
1731            padding:90px 0 40px;
1732            color:#fff;
1733        }
1734        
1735        /* footer */
1736    
1737        .footer-grid{
1738            display:flex;
1739            justify-content: space-between;
1740        }
1741        
1742        .footer-brand img{
1743            width:280px;
1744            margin-bottom:35px;
1745        }
1746        
1747        .footer-brand p{
1748            color:#E5E5E5;
1749            font-size:20px;
1750            line-height:1.6;
1751            max-width:420px;
1752        }
1753        
1754        .social-icons{
1755            display:flex;
1756            gap:30px;
1757            margin-top:40px;
1758        }
1759        
1760        .social-icons a{
1761            color:#fff!important;
1762            font-size:26px!important;
1763        }
1764        
1765        .footer-links h3,
1766        .footer-cta h3{
1767            font-size:1.3rem!important;
1768            font-weight:700;
1769            margin-bottom:45px;
1770            margin-top: 1rem;
1771        }
1772        
1773        .footer-menu{
1774            display:flex;
1775            gap:80px;
1776        }
1777        
1778        .footer-menu div{
1779            display:flex;
1780            flex-direction:column;
1781            gap:22px;
1782        }
1783        
1784        .footer-menu a{
1785            color:#fff!important;
1786            font-size:1rem!important;
1787        }
1788        
1789        .footer-cta p{
1790            font-size:22px;
1791            line-height:1.6;
1792            color:#E5E5E5;
1793            margin-bottom:40px;
1794        }
1795        
1796        .demo-btn {
1797            display: inline-flex;
1798            justify-content: center;
1799            align-items: center;
1800            /* width: 285px; */
1801            /* height: 48px; */
1802            background: #fff;
1803            border-radius: 10px;
1804            color: #000 !important;
1805            font-size: 17px !important;
1806            font-weight: 600;
1807            padding: 0.5rem 2.5rem;
1808        }
1809        
1810        .footer-bottom{
1811            margin-top:90px;
1812            padding-top:30px;
1813            display:flex;
1814            justify-content:center;
1815            gap:60px;
1816            color:#fff;
1817            font-size:18px;
1818        }
1819        
1820        .footer-bottom a{
1821            color:#fff!important;
1822            margin-left:40px;
1823        }
1824        .platform-wrap p{
1825            color: #a7a7a7;
1826        }
1827        .exchange-card-par{
1828            font-size: 18px !important;
1829        }
1830        .slick-dots li.slick-active button:before{
1831            color: #E50000!important;
1832        }
1833        .hero-inner h1{
1834            margin: 0 0 14px!important;
1835        }
1836        .section-capture{
1837            margin-bottom: 0px;
1838        }
1839        .film-exchange-content-sub{
1840            font-size:1.5rem!important
1841        }
1842    
1843        .hero-footer-wrap{
1844            width: 43%;
1845            float: right;
1846            position: relative;
1847            bottom: 2rem;
1848        }
1849        .camera-wrap-custom{
1850            margin-top: 1.5rem;
1851        }
1852        .camera-header-wrap p{
1853                line-height: 1.3;
1854                color: #000;
1855                opacity: 1.0;
1856                font-size: 0.7rem !important;
1857        }
1858        .cam-custom-img1{
1859                width: 89px;
1860        }
1861            .cam-custom-img2{
1862                width: 82px;
1863        }
1864            .cam-custom-img3{
1865                width: 150px;
1866        }
1867            .cam-custom-img4{
1868                width: 279px;
1869        }
1870        .disk-img{
1871            width: 180px;
1872            height:min-content;
1873            align-self: center;
1874            
1875        }
1876        .ios-img {
1877            width: 180px;
1878            height:min-content;
1879            align-self: center;
1880        }
1881    
1882        /* .custom-cam-column{
1883            border-right:2px solid #d1d1d1;
1884        } */
1885            .camera-card-inner{
1886                border: 2px solid #d1d1d1;
1887                padding: 2rem 2.5rem;
1888                border-radius: 30px;
1889            }
1890            .camera-card-inner-custom{
1891                border: 2px solid #d1d1d1;
1892                padding: 2rem 2.5rem;
1893                border-radius: 30px;
1894            }
1895            .cam-wrap{
1896                text-align: start;
1897            }
1898            .disk-img{
1899                margin-right: 5rem;
1900            }
1901            .ios-img{
1902                margin-right: 5rem;
1903            }
1904            .cam-span-custom{
1905                font-size: 13px;
1906            }
1907            .camera-wrap-custom-par-disk{
1908                margin-bottom: 0rem;
1909            }
1910            .camera-wrap-custom-par-ios{
1911                margin-bottom: 0.9rem;
1912            }
1913            .custom-ios{
1914                padding: 2.4rem 2.5rem;
1915            }
1916                
1917        .slick-dots li button:before {
1918          font-size: 9px!important;
1919        }
1920        .newFooterSection .footer-outer .footer-sub-inner .social-media-btn {
1921            display: none;
1922        }
1923        .newFooterSection .footer-outer {
1924            background-color: #1e1e1e;
1925        }
1926        .copyright-text{
1927            padding-bottom: 1.5rem;
1928        }
1929        .par-opacity{
1930            opacity:.7;
1931        }
1932        .spn-img img{
1933            width:15px
1934        }
1935        .spn-img{
1936            margin-right: .5rem;
1937        }
1938        @media (min-width: 964px) and (max-width: 1350px){
1939    
1940        .audience-grid {
1941            display: grid;
1942            grid-template-columns: repeat(2, 1fr);
1943            gap: 18px;
1944        }
1945        }
1946        /* .camera-card-inner {
1947        border: 2px solid #d1d1d1;
1948        padding: 1rem 1.5rem;
1949        border-radius: 30px;
1950    } */
1951        /* @media (min-width: 964px) and (max-width: 1350px){
1952    
1953        .audience-grid {
1954            display: grid;
1955            grid-template-columns: repeat(2, 1fr);
1956            gap: 18px;
1957        }
1958        } */
1959         @media (max-width: 720px) {
1960            .disk-img{
1961                margin-right: 1rem;
1962                width: 125px;
1963                height: 110px;
1964            }
1965            .ios-img{
1966                margin-right: 1rem;
1967                width: 125px;
1968                height: 110px;
1969            }
1970            .platform-row-wrap {
1971                padding: 0 1rem;
1972            }
1973            .footer-bottom {
1974                margin-top: -67px;
1975         }
1976         .football-sec-banner {
1977            padding: 8rem 2rem;
1978         }
1979        .vertical-line {
1980            margin: 0px 0.5rem;
1981        }
1982        .footbal-sec-wrap-section p{
1983            font-size: 11px !important;
1984            line-height: 1.2;
1985        }
1986        .footer-grid{
1987            display:block;
1988        }
1989        .footer-section{
1990            padding:45px 0 40px;
1991        }
1992        .social-icons {
1993            margin-top: 24px;
1994        }
1995        .social-icons a {
1996            font-size: 20px !important;
1997        }
1998        .footer-brand {
1999            margin-bottom: 1.5rem;
2000        }
2001        .footer-links h3, .footer-cta h3 {
2002            margin-bottom: 29px;
2003        }
2004        .footer-cta{
2005            margin-top: 1.5rem;
2006         }
2007         .banner-content-1 {
2008            font-size: 2rem !important;
2009        }
2010        .banner-content-1 {
2011            font-size: 2rem !important;
2012        }
2013        .hero-footer-wrap
2014         {
2015            width: 1
201500%;
2016            float: none;
2017            padding-left: 1rem;
2018            padding-right: 0.5rem;
2019        }
2020        .banner-content-2 {
2021            font-weight: bold !important;
2022            font-size: 1.5rem !important;
2023            letter-spacing: unset !important;
2024        }
2025        .section p.lead {
2026            line-height: 1.48;
2027            font-size: 14px !important;
2028        }
2029        br.break-custom {
2030            display: none;
2031        }
2032        section h1 {
2033            font-size:1.5rem !important;
2034        }
2035        .wokflow-head {
2036            text-align: center;
2037        }
2038        .custom-mobile{
2039            font-size: 1.5rem !important;
2040        }
2041        .logo-grid {
2042            grid-template-columns: repeat(3, 1fr) !important;
2043        }
2044        .logo-card {
2045            width: 100px;
2046            height: 100px;
2047        }
2048        .cap {
2049            min-width: 67px;
2050        }
2051    
2052         }
2053            
2054        
2055            
2056        /* animation */
2057        .aud-card{
2058            opacity: 0;
2059            transform: translateY(70px) scale(.96);
2060            transition:
2061                opacity .8s cubic-bezier(.22,1,.36,1),
2062                transform .8s cubic-bezier(.22,1,.36,1);
2063        }
2064        
2065        .aud-card.show{
2066            opacity: 1;
2067            transform: translateY(0) scale(1);
2068        }
2069        
2070        /* section-2 animations */
2071        /* Initial State */
2072        
2073        .hero .eyebrow,
2074        .hero h1,
2075        .hero .hero-description,
2076        .hero .cta,
2077        .hero .cap,
2078        .hero-visual,
2079        .hero-footer-wrap{
2080            opacity:0;
2081        }
2082        
2083        /* Individual positions */
2084        
2085        .hero .eyebrow{
2086            transform:translateX(-40px);
2087        }
2088        
2089        .hero h1{
2090            transform:translateY(60px);
2091        }
2092        
2093        .hero .hero-description{
2094            transform:translateY(40px);
2095        }
2096        
2097        .hero .cta{
2098            transform:translateY(40px);
2099        }
2100        
2101        .hero .cap{
2102            transform:translateY(35px);
2103        }
2104        
2105        .hero-visual{
2106            transform:translateX(80px);
2107        }
2108        
2109        .hero-footer-wrap{
2110            transform:translateY(50px);
2111        }
2112        
2113        
2114        .animate{
2115            opacity:1 !important;
2116            transform:translate(0,0) !important;
2117            transition:all .8s cubic-bezier(.22,1,.36,1);
2118        }
2119        
2120        /* animation section4 */
2121        
2122        .platform-wrap{
2123            opacity:0;
2124            transform:translateY(70px) scale(.92);
2125            transition:
2126                opacity .8s ease,
2127                transform .8s cubic-bezier(.22,1,.36,1);
2128        }
2129        
2130        .platform-wrap.show{
2131            opacity:1;
2132            transform:translateY(0) scale(1);
2133        }
2134        
2135        
2136        .platform-wrap img{
2137            transform:translateY(25px) rotate(-8deg) scale(.8);
2138            opacity:0;
2139            transition:all .7s ease;
2140        }
2141        
2142        .platform-wrap.show img{
2143            transform:translateY(0) rotate(0deg) scale(1);
2144            opacity:1;
2145        }
2146        
2147        .platform-wrap.show img{
2148            animation:floatIcon 3s ease-in-out infinite;
2149        }
2150        
2151        @keyframes  floatIcon{
2152        
2153            0%{
2154                transform:translateY(0);
2155            }
2156        
2157            50%{
2158                transform:translateY(-8px);
2159            }
2160        
2161            100%{
2162                transform:translateY(0);
2163            }
2164        
2165        }
2166        /* Heading animation */
2167        
2168        .platform-eyebrow{
2169            opacity:0;
2170            transform:translateY(-35px);
2171            transition:all .7s ease;
2172        }
2173        
2174        .platform-title{
2175            opacity:0;
2176            transform:translateY(40px);
2177            transition:all .8s ease;
2178        }
2179        
2180        .platform-eyebrow.show,
2181        .platform-title.show{
2182            opacity:1;
2183            transform:translateY(0);
2184        }
2185        /* animation section5 */
2186        .workflow-image{
2187            animation: workflowFloat 6s ease-in-out infinite;
2188        }
2189        
2190        @keyframes  workflowFloat{
2191        
2192            0%{
2193                transform:translateY(0) scale(1);
2194            }
2195        
2196            25%{
2197                transform:translateY(-8px) scale(1.01);
2198            }
2199        
2200            50%{
2201                transform:translateY(0) scale(1);
2202            }
2203        
2204            75%{
2205                transform:translateY(8px) scale(1.01);
2206            }
2207        
2208            100%{
2209                transform:translateY(0) scale(1);
2210            }
2211        
2212        }
2213        /* animation section 6 */
2214        /* Section heading */
2215        
2216        .sideline-heading{
2217            opacity:0;
2218            transform:translateY(-40px);
2219            transition:all .8s ease;
2220        }
2221        
2222        .sideline-heading.show{
2223            opacity:1;
2224            transform:translateY(0);
2225        }
2226        
2227        /* Cards */
2228        
2229        .sideline-card{
2230            opacity:0;
2231            transform:translateY(60px) scale(.95);
2232            transition:
2233                opacity .7s ease,
2234                transform .7s cubic-bezier(.22,1,.36,1);
2235        }
2236        
2237        .sideline-card.show{
2238            opacity:1;
2239            transform:translateY(0) scale(1);
2240        }
2241        
2242        /* Icon animation */
2243        
2244        .sideline-card img{
2245            opacity:0;
2246            transform:scale(.6) rotate(-15deg);
2247            transition:all .6s ease;
2248        }
2249        
2250        .sideline-card.show img{
2251            opacity:1;
2252            transform:scale(1) rotate(0);
2253        }
2254        
2255        /* Floating icon */
2256        
2257        .sideline-card.show img{
2258            animation:iconFloat 3s ease-in-out infinite;
2259        }
2260        
2261        @keyframes  iconFloat{
2262        
2263            0%{
2264                transform:translateY(0);
2265            }
2266        
2267            50%{
2268                transform:translateY(-6px);
2269            }
2270        
2271            100%{
2272                transform:translateY(0);
2273            }
2274        
2275        }
2276        /* animation section7 */
2277        /* Heading */
2278        
2279        .exchange-eyebrow,
2280        .exchange-title,
2281        .exchange-lead,
2282        .exchange-footer-text{
2283        
2284            opacity:0;
2285            transition:all .8s ease;
2286        
2287        }
2288        
2289        .exchange-eyebrow{
2290        
2291            transform:translateY(-30px);
2292        
2293        }
2294        
2295        .exchange-title{
2296        
2297            transform:translateY(40px);
2298        
2299        }
2300        
2301        .exchange-lead{
2302        
2303            transform:translateY(25px);
2304        
2305        }
2306        
2307        .exchange-footer-text{
2308        
2309            transform:translateY(30px);
2310        
2311        }
2312        
2313        .exchange-eyebrow.show,
2314        .exchange-title.show,
2315        .exchange-lead.show,
2316        .exchange-footer-text.show{
2317        
2318            opacity:1;
2319            transform:translateY(0);
2320        
2321        }
2322        
2323        
2324        /* Cards */
2325        
2326        .exchange-card{
2327        
2328            opacity:0;
2329            transition:all .9s cubic-bezier(.22,1,.36,1);
2330        
2331        }
2332        
2333        .exchange-card-left{
2334        
2335            transform:translateX(-120px);
2336        
2337        }
2338        
2339        .exchange-card-right{
2340        
2341            transform:translateX(120px);
2342        
2343        }
2344        
2345        .exchange-card.show{
2346        
2347            opacity:1;
2348            transform:translateX(0);
2349        
2350        }
2351        
2352        
2353        /* Tick rows */
2354        
2355        .exchange-item{
2356        
2357            opacity:0;
2358            transform:translateY(25px);
2359            transition:all .5s ease;
2360        
2361        }
2362        
2363        .exchange-item.show{
2364        
2365            opacity:1;
2366            transform:translateY(0);
2367        
2368        }
2369        
2370        
2371        /* Icons */
2372        
2373        .exchange-item img{
2374        
2375            transition:.35s ease;
2376        
2377        }
2378        
2379        .exchange-item.show img{
2380        
2381            animation:exchangeTick .45s ease;
2382        
2383        }
2384        
2385        @keyframes  exchangeTick{
2386        
2387            0%{
2388        
2389                transform:scale(.5) rotate(-25deg);
2390        
2391            }
2392        
2393            100%{
2394        
2395                transform:scale(1) rotate(0);
2396        
2397            }
2398        
2399        }
2400        
2401        /* section8 and 9 animation */
2402        /* ================= CAMERA SECTION ================= */
2403        
2404        .camera-title{
2405        
2406            opacity:0;
2407            transform:translateY(-50px);
2408            transition:all .8s ease;
2409        
2410        }
2411        
2412        .camera-card{
2413        
2414            opacity:0;
2415            transform:translateY(90px);
2416            transition:all .8s cubic-bezier(.22,1,.36,1);
2417        
2418        }
2419        
2420        .camera-title.show,
2421        .camera-card.show{
2422        
2423            opacity:1;
2424            transform:translateY(0);
2425        
2426        }
2427        
2428        /* Floating cameras */
2429        
2430        .camera-card img{
2431        
2432            animation:cameraFloat 4s ease-in-out infinite;
2433        
2434        }
2435        
2436        .camera-card:nth-child(2) img{
2437        
2438            animation-delay:.5s;
2439        
2440        }
2441        
2442        .camera-card:nth-child(3) img{
2443        
2444            animation-delay:1s;
2445        
2446        }
2447        
2448        .camera-card:nth-child(4) img{
2449        
2450            animation-delay:1.5s;
2451        
2452        }
2453        .camera-card:nth-child(5) img{
2454        
2455            animation-delay:2s;
2456        
2457        }
2458        .camera-card:nth-child(6) img{
2459        
2460            animation-delay:2.5s;
2461        
2462        }
2463        @keyframes  cameraFloat{
2464        
2465            0%{
2466        
2467                transform:translateY(0px);
2468        
2469            }
2470        
2471            50%{
2472        
2473                transform:translateY(-10px);
2474        
2475            }
2476        
2477            100%{
2478        
2479                transform:translateY(0px);
2480        
2481            }
2482        
2483        }
2484        
2485        
2486        /* ================= FEATURE SECTION ================= */
2487        
2488        .feature-card{
2489        
2490            opacity:0;
2491            transform:translateY(80px);
2492            transition:all .8s cubic-bezier(.22,1,.36,1);
2493        
2494        }
2495        
2496        .feature-card.show{
2497        
2498            opacity:1;
2499            transform:translateY(0);
2500        
2501        }
2502        
2503        .feature-card img{
2504        
2505            transform:scale(.8);
2506            transition:.8s ease;
2507        
2508        }
2509        
2510        .feature-card.show img{
2511        
2512            transform:scale(1);
2513        
2514        }
2515        
2516        .feature-card h4{
2517        
2518            opacity:0;
2519            transform:translateY(20px);
2520            transition:.6s;
2521        
2522        }
2523        
2524        .feature-card.show h4{
2525        
2526            opacity:1;
2527            transform:translateY(0);
2528        
2529        }
2530        
2531        .feature-card p{
2532        
2533            opacity:0;
2534            transform:translateY(20px);
2535            transition:.7s;
2536        
2537        }
2538        
2539        .feature-card.show p{
2540        
2541            opacity:1;
2542            transform:translateY(0);
2543        
2544        }
2545        .footer_double_btn {
2546            display:none!important;
2547        }
2548        .social-media-btn{
2549            display:none!important;
2550        }
2551        .newFooterSection .footer-outer {
2552            background-color: #1e1e1e!important;
2553        }
2554        @media (min-width: 992px) {
2555        header .header-wrap-inner .buttons
2556         {
2557                padding-left: 1rem;
2558         }
2559        }
2560</style>
2561    <body>
2562        <!-- loader -->
2563        <div class="loader-wrapper">
2564            <div class="loader"></div>
2565        </div>
2566
2567
2568    <section class="hero-banner" data-scroll-section>
2569        <div class="hero-banner-full-wrap" id="slider">
2570            <div class="hero-banner-outer slide-show"  id="item1">
2571                <div class="container">
2572                    <div class="slider" >
2573                        <div class="hero-banner-inner item">
2574                            <div class="row align-items-center gx-5 gy-4">
2575                                <div class="col-md-6">
2576                                    <div class="banner-image-wrap">
2577                                    <picture>
2578                                        <img src="https://snipback.com/assets/images/home/banner-img1.webp" fetchpriority="high" loading="eager" alt="banner-image">
2579                                    </picture> 
2580                                    </div>
2581                                </div>
2582                                <div class="col-md-6">
2583                                    <div class="banner-content">
2584                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2585                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2586                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2587                                            Exchange with opponents.Track stats.Stream games.Improve every day. 
2588                                        </p>
2589                                       
2590                                       <div class="btn-wrap">
2591                                            <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2592                                        </div>
2593                                    </div>
2594                                </div>
2595                            </div>
2596                        </div>
2597                        <div class="hero-banner-inner item">
2598                            <div class="row align-items-center gx-5 gy-4">
2599                                <div class="col-md-6">
2600                                    <div class="banner-image-wrap">
2601                                    <picture>
2602                                        <img src="https://snipback.com/assets/images/home/banner-img2.webp" alt="banner-image">
2603                                    </picture> 
2604                                    </div>
2605                                </div>
2606                                <div class="col-md-6">
2607                                    <div class="banner-content">
2608                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2609                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2610                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2611                                            Exchange with opponents.Track stats.Stream games.Improve every day. 
2612                                        </p>
2613                                        <div class="btn-wrap">
2614                                        <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2615                                        </div>
2616                                    </div>
2617                                </div>
2618                            </div>
2619                        </div>
2620                        <div class="hero-banner-inner item">
2621                            <div class="row align-items-center gx-5 gy-4">
2622                                <div class="col-md-6">
2623                                    <div class="banner-image-wrap">
2624                                        <picture>
2625                                        <img src="https://snipback.com/assets/images/home/base.webp" alt="banner-image">
2626                                    </picture> 
2627                                    </div>
2628                                </div>
2629                                <div class="col-md-6">
2630                                    <div class="banner-content">
2631                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2632                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2633                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2634                  
2634                          Exchange with opponents.Track stats.Stream games.Improve every day. 
2635                                        </p>
2636                                        <div class="btn-wrap">
2637                                        <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2638                                        </div>
2639                                    </div>
2640                                </div>
2641                            </div>
2642                        </div>
2643                        <div class="hero-banner-inner item">
2644                            <div class="row align-items-center gx-5 gy-4">
2645                                <div class="col-md-6">
2646                                    <div class="banner-image-wrap">
2647                                    <picture>
2648                                        <img src="https://snipback.com/assets/images/home/banner-img3.webp"  alt="banner-image">
2649                                    </picture> 
2650                                    </div>
2651                                </div>
2652                                <div class="col-md-6">
2653                                    <div class="banner-content">
2654                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2655                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2656                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2657                                            Exchange with opponents.Track stats.Stream games.Improve every day. 
2658                                        </p>
2659                                        <div class="btn-wrap">
2660                                        <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2661                                        </div>
2662                                    </div>
2663                                </div>
2664                            </div>
2665                        </div>
2666                        <div class="hero-banner-inner item">
2667                            <div class="row align-items-center gx-5 gy-4">
2668                                <div class="col-md-6">
2669                                    <div class="banner-image-wrap">
2670                                    <picture>
2671                                        <img src="https://snipback.com/assets/images/home/baseball-new.webp"  alt="banner-image">
2672                                    </picture> 
2673                                    </div>
2674                                </div>
2675                                <div class="col-md-6">
2676                                    <div class="banner-content">
2677                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2678                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2679                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2680                                            Exchange with opponents.Track stats.Stream games.Improve every day. 
2681                                        </p>
2682                                       <div class="btn-wrap">
2683                                       <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2684                                       </div>
2685                                    </div>
2686                                </div>
2687                            </div>
2688                        </div>
2689                        <div class="hero-banner-inner item">
2690                            <div class="row align-items-center gx-5 gy-4">
2691                                <div class="col-md-6">
2692                                    <div class="banner-image-wrap">
2693                                    <picture>
2694                                        <img src="https://snipback.com/assets/images/home/pic11.webp"  alt="banner-image">
2695                                    </picture> 
2696                                    </div>
2697                                </div>
2698                                <div class="col-md-6">
2699                                    <div class="banner-content">
2700                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2701                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2702                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2703                                            Exchange with opponents.Track stats.Stream games.Improve every day. 
2704                                        </p>
2705                                        <div class="btn-wrap">
2706                                        <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2707                                        </div>
2708                                    </div>
2709                                </div>
2710                            </div>
2711                        </div>
2712                        <div class="hero-banner-inner item">
2713                            <div class="row align-items-center gx-5 gy-4">
2714                                <div class="col-md-6">
2715                                    <div class="banner-image-wrap">
2716                                        <picture>
2717                                        <img src="https://snipback.com/assets/images/home/pic10.webp"  alt="banner-image">
2718                                    </picture>
2719                                    </div>
2720                                </div>
2721                                <div class="col-md-6">
2722                                    <div class="banner-content">
2723                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2724                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2725                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2726                                            Exchange with opponents.Track stats.Stream games.Improve every day. 
2727                                        </p>
2728                                        <div class="btn-wrap">
2729                                        <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2730                                        </div>
2731                                    </div>
2732                                </div>
2733                            </div>
2734                        </div>
2735                        <div class="hero-banner-inner item">
2736                            <div class="row align-items-center gx-5 gy-4">
2737                                <div class="col-md-6">
2738                                    <div class="banner-image-wrap">
2739                                        <picture>
2740                                        <img src="https://snipback.com/assets/images/home/singlebanner.webp"  alt="banner-image">
2741                                    </picture>
2742                                    </div>
2743                                </div>
2744                                <div class="col-md-6">
2745                                    <div class="banner-content">
2746                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2747                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2748                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2749                                            Exchange with opponents.Track stats.Stream games.Improve every day. 
2750                                        </p>
2751                                         <div class="btn-wrap">
2752                                         <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2753                                         </div>
2754                                    </div>
2755                                </div>
2756                            </div>
2757                        </div>
2758                        <div class="hero-banner-inner item">
2759                            <div class="row align-items-center gx-5 gy-4">
2760                                <div class="col-md-6">
2761                                    <div class="banner-image-wrap">
2762                                        <picture>
2763                                        <img src="https://snipback.com/assets/images/home/music.webp"  alt="banner-image">
2764                                    </picture>
2765                                    </div>
2766                                </div>
2767                                <div class="col-md-6">
2768                                    <div class="banner-content">
2769                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2770                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2771                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2772                                            Exchange with opponents.Track stats.Stream games.Improve every day. 
2773                                        </p>
2774                                      <div class="btn-wrap">
2775                                      <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2776                                      </div>
2777                                    </div>
2778                                </div>
2779                            </div>
2780                        </div>
2781                        <div class="hero-banner-inner item">
2782                            <div class="row align-items-center gx-5 gy-4">
2783                                <div class="col-md-6">
2784                                    <div class="banner-image-wrap">
2785                                        <picture>
2786                                        <img src="https://snipback.com/assets/images/home/Graduation.webp"  alt="banner-image">
2787                                    </picture> 
2788                                    </div>
2789                                </div>
2790                                <div class="col-md-6">
2791                                    <div class="banner-content">
2792                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2793                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2794                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2795                                            Exchange with opponents.Track stats.Stream games.Improve every day. 
2796                                        </p>
2797                                     <div class="btn-wrap">
2798                                     <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2799                                     </div>
2800                                    </div>
2801                                </div>
2802                            </div>
2803                        </div>
2804                        <div class="hero-banner-inner item">
2805                            <div class="row align-items-center gx-5 gy-4">
2806                                <div class="col-md-6">
2807                                    <div class="banner-image-wrap">
2808                                        <picture>
2809                                        <img src="https://snipback.com/assets/images/home/Classroom.webp"  alt="banner-image">
2810                                    </picture> 
2811                                    </div>
2812                                </div>
2813                                <div class="col-md-6">
2814                                    <div class="banner-content">
2815                                        <h1 class="banner-content-1 mb-0">SnipBack AI,</h1>
2816                                        <h1 class="banner-content-2">The complete sports<br/>film platform</h1>
2817                                        <p>for schools. colleges. clubs. teams. coaches. and families Can capture every angle.Review faster.
2818                                            Exchange with opponents.Track stats.Stream games.Improve every day. 
2819                                        </p>
2820                                        <div class="btn-wrap">
2821                                        <button class="btn btn-outline-white md"><a href="https://calendly.com/snipbackai/demo?month=2025-05" target="_blank">Lets Talk</a></button>
2822                                        </div>
2823                                    </div>
2824                                </div>
2825                            </div>
2826                        </div>
2827                    </div>
2828                </div>
2829            </div>
2830        </div>
2831    </section>
2832
2833
2834
2835
2836    <div class="bg-wrapper">
2837    
2838      <section class="hero">
2839        <div class="hero-inner">
2840          <div>
2841            <div class="eyebrow">The complete sports film platform</div>
2842            <h1>Capture. Review.<br/>Exchange. <span>Improve.</span></h1>
2843            <p class="hero-description">SnipBack helps schools, colleges, clubs, teams, coaches, players, and families capture every angle, review faster, exchange film, track stats, stream games, and win more - all in one connected platform.</p>
2844            <div class="cta">
2845              <!-- <a class="custom-btn-1" href="#demo">See How It Works </a> -->
2846              <a class="custom-btn-2"  href="https://calendly.com/snipbackai/site-demo?month=2026-01" target="_blank">Schedule a Demo</a>
2847            </div>
2848            <div class="cap-row">
2849              <div class="cap"><div class="i"><img src="https://snipback.com/assets/images/home/fullscreen-capture.svg" class="img-fluid" alt=""></div>Capture</div>
2850              <div class="cap"><div class="i"><img src="https://snipback.com/assets/images/home/search-capture.svg" class="img-fluid" alt=""></div>Review</div>
2851              <div class="cap"><div class="i"><img src="https://snipback.com/assets/images/home/exchange-capture.svg" class="img-fluid" alt=""></div>Exchange</div>
2852              <div class="cap"><div class="i"><img src="https://snipback.com/assets/images/home/stat-capture.svg" class="img-fluid" alt=""></div>Analyze</div>
2853              <div class="cap"><div class="i"><img src="https://snipback.com/assets/images/home/share-capture.svg" class="img-fluid" alt=""></div>Share</div>
2854              <div class="cap"><div class="i"><img src="https://snipback.com/assets/images/home/store-capture.svg" class="img-fluid" alt=""></div>Store</div>
2855            </div>
2856          </div>
2857          <div class="hero-visual" aria-label="SnipBack platform visual">
2858            <div class="tablet">
2859                <img src="https://snipback.com/assets/images/home/sports-img.png" class="img-fluid" alt="">
2860            </div>
2861          </div>
2862        </div>
2863        <div class="hero-footer-wrap">
2864               <h6>One Platform</h6>
2865               <p class="">
2865Sideline replay, exchange, scout, stats, streaming, and storage<br/>stay connected across your program</p>
2866        </div>
2867      </section>
2868
2869      <section class="section" id="what">
2870        <div class="inner">
2871          <div class="center">
2872            <div class="eyebrow">What is SnipBack?</div>
2873            <h1>One Platform. Built for </br>Every Level of Competition.</h1>
2874            <p class="lead">SnipBack helps schools, colleges, clubs, teams, coaches, players, and families capture, review, exchange, tag, stream, analyze, and share film in one connected platform. Start with the workflow you need today, then add more as your program grows.</p>
2875          </div>
2876          <div class="audience-grid">
2877            <article class="aud-card aud-card1 primary">
2878              <div class="aud-top aud-top1"><div class="circle"><img src="https://snipback.com/assets/images/home/atheletic.svg" class="img-fluid" alt=""></div><h3>High Schools &<br/>Athletic Departments</h3></div>
2879              <p class="desc">The most complete solution for multi-team programs.</p>
2880              <ul><li>Mobile sideline kits</li><li>Film exchange with opponents</li><li>Unlimited storage & streaming</li><li>Optional Zero-Setup upgrades</li><li>Scout, chart, and analyze</li></ul>
2881              <!-- <div class="link">Explore School Workflows →</div> -->
2882            </article>
2883            <article class="aud-card aud-card2">
2884              <div class="aud-top aud-top2"><div class="circle blue"><img src="https://snipback.com/assets/images/home/juco.svg" class="img-fluid" alt=""></div><h3>Colleges, JUCOs<br/>& Small Programs</h3></div>
2885              <p class="desc">Professional film tools without the enterprise price tag.</p>
2886              <ul><li>Multi-team film management</li><li>Recruiting clips & development</li><li>Stats, reports & streaming</li><li>Affordable, scalable solutions</li><li>Built for D3, NAIA, NJCAA & more</li></ul>
2887              <!-- <div class="link" style="color:var(--blue)">Explore College Workflows →</div> -->
2888            </article>
2889            <article class="aud-card aud-card3">
2890              <div class="aud-top aud-top3"><div class="circle green"><img src="https://snipback.com/assets/images/home/travel.svg" class="img-fluid" alt=""></div><h3>Club & Travel<br/>Programs</h3></div>
2891              <p class="desc">Simple, fast, effective tools for development and highlights.</p>
2892              <ul><li>Capture with iPhone or iPad</li><li>Fast upload & organization</li><li>Player clips & highlight reels</li><li>Stats & reports</li><li>Share with players, parents, recruiters</li></ul>
2893              <!-- <div class="link" style="color:var(--green)">Explore Club Workflows →</div> -->
2894            </article>
2895            <article class="aud-card aud-card4">
2896              <div class="aud-top aud-top4"><div class="circle purple"><img src="https://snipback.com/assets/images/home/coach.svg" class="img-fluid" alt=""></div><h3>Coaches<br/>& Teams</h3></div>
2897              <p class="desc">Better film, better teaching, better results.</p>
2898              <ul><li>Snips, tags & collections</li><li>Whiteboard & assignments</li><li>Teach, review & communicate</li><li>Reports & performance insights</li><li>All in one place</li></ul>
2899              <!-- <div class="link" style="color:var(--purple)">Explore Team Tools →</div> -->
2900            </article>
2901          </div>
2902        </div>
2903      </section>
2904
2905      <section class="section section-capture" style="background-color: #f4f4f4;">
2906        <div class="row">
2907            <div class="col-lg-4 justify-content-center align-items-center d-flex">
2908                <h1 class="wokflow-head">
2909                    Choose<br class="break-custom"/>the workflow<br class="break-custom"/>that fits your<br class="break-custom"/>program
2910                </h1>
2911            </div>
2912            <div class="col-lg-8">
2913                <div class="row">
2914                    <div class="col-lg-4">
2915                     <div class="left-border-line">
2916                       <img src="https://snipback.com/assets/images/home/capture.svg" class="img-fluid" alt="capture">
2917
2918                        <h3>1. Capture</h3>
2919                        <p>
2920                            From sideline to lab or phones - capture every angle with confidence.
2921                        </p>
2922                     </div>
2923                    </div>
2924                    <div class="col-lg-4">
2925                      <div class="left-border-line">
2926                        <img src="https://snipback.com/assets/images/home/organize.svg" class="img-fluid" alt="organize">
2927                        <h3>2. Organize</h3>
2928                        <p>
2929                            Upload, sort, and manage film by team, event, or athlete.
2930                        </p>
2931                     </div>
2932                    </div>
2933                    <div class="col-lg-4">
2934                        <div class="left-border-line">
2935                        <img src="https://snipback.com/assets/images/home/review.svg" class="img-fluid" alt="review">
2936                        <h3>3. Review & Tag</h3>
2937                        <p>
2938                            Watch, tag, clip, and create collections that drive improvement.
2939                        </p>
2940                      </div>
2941                    </div>
2942                    <div class="col-lg-4">
2943                      <div class="left-border-line"> 
2944                        <img src="https://snipback.com/assets/images/home/exchange-share.svg" class="img-fluid" alt="exchange">
2945                        <h3>4. Exchange & Share</h3>
2946                        <p>
2947                            Exchange with opponents or share clips with players, coaches, and families.
2948                        </p>
2949                      </div>
2950                    </div>
2951                    <div class="col-lg-4">
2952                      <div class="left-border-line">
2953                        <img src="https://snipback.com/assets/images/home/analyse-improve.svg" class="img-fluid" alt="analyze">
2954                        <h3>5. Analyze & Improve</h3>
2955                        <p>
2956                           Use stats, reports, and insights to make smarter decisions and win more.
2957                        </p>
2958                      </div>
2959                    </div>
2960                </div>
2961            </div>
2962        </div>
2963
2964      </section>
2965
2966      <section class="section platform-section" style="background-color: #000000;color: #fff;">
2967
2968           <div class="row">
2969            <div class="col-lg-12">
2970                <div class="eyebrow text-center platform-eyebrow">THE SNIPBACK PLATFORM</div>
2971                <h1 class="platform-header platform-title text-center">Everything you need.<br/><span>All in one place.</span></h1>
2972            </div>
2973            <div class="row platform-row-wrap">
2974                <div class="col-lg-4 platform-column-wrap">
2975                    <div class="platform-wrap">
2976                        <img src="https://snipback.com/assets/images/home/live.svg" class="img-fluid" alt="capture">
2977                        <h3>Live Charting</h3>
2978                        <p>
2979                            Chart games in real time and access match stats instantly
2980                        </p>
2981                    </div>
2982
2983                    <div class="platform-wrap">
2984                        <img src="https://snipback.com/assets/images/home/storage.svg" class="img-fluid" alt="capture">
2985                        <h3>Unlimited Storage</h3>
2986                        <p>
2987                            Secure cloud storage for all your teams and seasons.
2988                        </p>
2989                    </div>
2990
2991                </div>
2992                
2993                <div class="col-lg-4 platform-column-wrap">
2994                    <div class="platform-wrap">
2995                        <img src="https://snipback.com/assets/images/home/stat-rep.svg" class="img-fluid" alt="capture">
2996                        <h3>Stats & Reports</h3>
2997                        <p>
2998                            Automated stats, custom reports, and performance insights.
2999                        </p>
3000                    </div>
3001
3002                    <div class="platform-wrap">
3003                        <img src="https://snipback.com/assets/images/home/watch-integation.svg" class="img-fluid" alt="capture">
3004                        <h3>Watch Integration</h3>
3005                        <p>
3006                            Instant alerts, play notifications, and sideline communication.
3007                        </p>
3008                    </div>
3009
3010                </div>
3011
3012                <div class="col-lg-4 platform-column-wrap">
3013                    <div class="platform-wrap">
3014                        <img src="https://snipback.com/assets/images/home/streaming.svg" class="img-fluid" alt="capture">
3015                        <h3>Live Streaming</h3>
3016                        <p>
3017                            Stream to fans, parents, and scouts and supporters live or on demand
3018                        </p>
3019                    </div>
3020
3021                    <div class="platform-wrap">
3022                        <img src="https://snipback.com/assets/images/home/handshake.svg" class="img-fluid" alt="capture">
3023                          <h3 class="mb-0">Snipback Handshake</h3>
3024                          <p style="font-size: 12px!important;line-height: 12px!important;color: #ffffff;opacity: 0.8;margin-bottom: 3px;">
3025                            SnipBack is not affiliated with or endorsed by Hudl. Hudl is a registered trademark of Agile Sports Technologies, Inc.
3026                          </p>
3027                        <p style="font-size: 12px!important;line-height: 12px!important;color: #ffffff;opacity: 0.8;margin-bottom: 3px;">
3028                        <p>
3029                            Seamless film exchange with Hudl for schools that use Hudl.
3030                        </p>
3031                    </div>
3032
3033                </div>
3034
3035
3036                
3037
3038            </div>
3039           </div>
3040
3041      </section>
3042
3043      <section class="section">
3044
3045           <div class="row">
3046                <div class="col-lg-12">
3047                    <h1 class="text-center">Built around the <br class="break-custom"/> Real World Film Workflow</h1>
3048                    <p class="text-center">
3049                        SnipBack connects the entire process - from game-day capture to film exchange, scouting, and sharing -<br class="break-custom"/> so your program stays organized across every team gets better.
3050                    </p>
3051               </div>
3052           </div>
3053           <div class="row real-high-school">
3054            <div class="col-lg-4">
3055                <div class="eyebrow" style="margin-bottom:0px">Mobile Kits</div>
3056                <h4>SnipBack Sideline</h4>
3057                <h6>The fastest, most reliable live video and coaching communication system for the sideline.</h6>
3058                <p>
3059                    Built for rapid setup, instant review, live communications and total staff synchronization.
3060                </p>
3061                <div class="sideline-card-wrap">
3062                    <img src="https://snipback.com/assets/images/home/rapid.svg" class="img-fluid" alt="">
3063                    <div class="">
3064                        <p class="sideline-paragraph1">Rapid Setup</p>
3065                        <p class="sideline-paragraph2">Deploy zones in minutes.</p>
3066                    </div>
3067                </div>
3068
3069                 <div class="sideline-card-wrap">
3070                    <img src="https://snipback.com/assets/images/home/instant-review.svg" class="img-fluid" alt="">
3071                    <div class="">
3072                        <p class="sideline-paragraph1">Instant Review</p>
3073                        <p class="sideline-paragraph2">See it. Clip it. Share it</p>
3074                    </div>
3075                </div>
3076
3077                <div class="sideline-card-wrap">
3078                    <img src="https://snipback.com/assets/images/home/sync.svg" class="img-fluid" alt="">
3079                    <div class="">
3080                        <p class="sideline-paragraph1">Total Sync</p>
3081                        <p class="sideline-paragraph2">Everyone on the same page</p>
3082                    </div>
3083                </div>
3084                
3085            </div>
3086            <div class="col-lg-8">
3087                <img src="https://snipback.com/assets/images/home/ground-camera.png" class="img-fluid  workflow-image" alt="">
3088            </div>
3089           </div>
3090
3091      </section>    
3092      
3093      
3094      <section class="section sideline-differ-wrap sideline-section" style="background-color: #000000;color: #fff;">
3095
3096           <div class="row">
3097
3098                  <div class="col-lg-3 sideline-differ-column sideline-card">
3099                    <h1>
3100                        Why SnipBack Sideline is Different
3101                    </h1>
3102                  </div>
3103
3104                  <div class="col-lg-3 sideline-differ-column sideline-card">
3105                    <img src="https://snipback.com/assets/images/home/wireless.svg" class="img-fluid" alt="">
3106                    <h3>
3107                        Advance Wireless<br/>Backbone
3108                    </h3>
3109                    <p>Wi-Fi architecture with tri-band performance, spectrum analysis, and fast DFS handling helps keep the sideline connected in demanding environments.</p>
3110                  </div>
3111
3112                 <div class="col-lg-3 sideline-differ-column sideline-card">
3113                    <img src="https://snipback.com/assets/images/home/zone.svg" class="img-fluid" alt="">
3114                    <h3>
3115                        Proprietary<br/>Zone Linking
3116                    </h3>
3117                    <p>SnipBack uses a purpose-built zone bridge architecture designed to reduce interference and keep every zone connected reliably.</p>
3118                  </div>
3119
3120                 <div class="col-lg-3 sideline-differ-column sideline-card">
3121                    <img src="https://snipback.com/assets/images/home/minute.svg" class="img-fluid" alt="">
3122                    <h3>
3123                        2 Minute<br/>Zone Setup
3124                    </h3>
3125                    <p>
3125Minimal assembly. Quick-connect mounted zones. Power. Connect, and go. Most zones can be deployed in about two minutes.</p>
3126                  </div>
3127
3128                  <div class="col-lg-3 sideline-differ-column sideline-card">
3129                    <img src="https://snipback.com/assets/images/home/setting.svg" class="img-fluid" alt="">
3130                    <h3>
3131                        Guided<br/>Setup Wizard
3132                    </h3>
3133                    <p>Step-by-step app guidance walks users through setup, testing, and troubleshooting so staff can get live faster.</p>
3134                  </div>
3135
3136                  <div class="col-lg-3 sideline-differ-column sideline-card">
3137                    <img src="https://snipback.com/assets/images/home/video-view.svg" class="img-fluid" alt="">
3138                    <h3>
3139                        Always-Sync<br/>Video Workflow
3140                    </h3>
3141                    <p>Video is continuously synchronized across the system-no manual send-to ipad workflow, no waiting and no missed film.</p>
3142                  </div>
3143
3144                  <div class="col-lg-3 sideline-differ-column sideline-card">
3145                    <img src="https://snipback.com/assets/images/home/profile-home.svg" class="img-fluid" alt="">
3146                    <h3>
3147                        One Pilot.<br/>Total Control
3148                    </h3>
3149                    <p>A single operator can manage linked cameras, ODK. and live snipping from one streamlined workflow.</p>
3150                  </div>
3151
3152                  <div class="col-lg-3 sideline-differ-column sideline-card">
3153                    <img src="https://snipback.com/assets/images/home/graph.svg" class="img-fluid" alt="">
3154                    <h3>
3155                        Live Charting &<br/>Tendencies
3156                    </h3>
3157                    <p>Chart in real time and access interactive in-game tendency insights without leaving the sideline.</p>
3158                  </div>
3159
3160                  <div class="col-lg-3 sideline-differ-column sideline-card">
3161                    <img src="https://snipback.com/assets/images/home/save-green.svg" class="img-fluid" alt="">
3162                    <h3>
3163                        Coach-Triggered<br/>Staff Snips
3164                    </h3>
3165                    <p>Use ring -snipping to instantly flag moments for review. Important clips flow into a dedicated STAFF SNIPS collection.</p>
3166                  </div>
3167
3168                  <div class="col-lg-3 sideline-differ-column sideline-card">
3169                    <img src="https://snipback.com/assets/images/home/refresh-green.svg" class="img-fluid" alt="">
3170                    <h3>
3171                        Auto Re-Sync<br/>Across Every iPad
3172                    </h3>
3173                    <p>If an iPad joins late, restarts, or reconnects, It automatically catches backup. Messages, Snipas, Whiteboards, and snapshots stay synced.</p>
3174                  </div>
3175
3176                  <div class="col-lg-3 sideline-differ-column sideline-card">
3177                    <img src="https://snipback.com/assets/images/home/play-green.svg" class="img-fluid" alt="">
3178                    <h3>
3179                        Gameplan Play<br/>Calling
3180                    </h3>
3181                    <p>Tap a play to notify coaches instantly, streamline communication, and auto-tag related video for fast retrieval later.</p>
3182                  </div>
3183
3184                  <div class="col-lg-3 sideline-differ-column sideline-card">
3185                    <img src="https://snipback.com/assets/images/home/watch-green.svg" class="img-fluid" alt="">
3186                    <h3>
3187                        Watch Integration -<br/>Coming 2026
3188                    </h3>
3189                    <p>Play calls can go directly to the wrist with vibration alerts, play names, and a tap-to-view mini play image.</p>
3190                  </div>
3191
3192                  <div class="col-lg-3 sideline-differ-column sideline-card">
3193                    <img src="https://snipback.com/assets/images/home/upload-cloud.svg" class="img-fluid" alt="">
3194                    <h3>
3195                        Automatically Uploaded<br/>to the SnipBack Cloud
3196                    </h3>
3197                    <p>Every game is automatically uploaded to the snipback platform, where coaches can review, share, download, organize, and analyze film using the full power of snipback. Even teams keeping Hudl can use Snipback Sideline as an extension of the boader SnipBack platform.</p>
3198                  </div>
3199
3200                  <div class="col-lg-3 sideline-differ-column sideline-card">
3201                    <img src="https://snipback.com/assets/images/home/network.svg" class="img-fluid" alt="">
3202                    <h3>
3203                       Full Live Streaming<br/>Built in
3204                    </h3>
3205                    <p>With an internet connection, snipback sideline doubles as a complete live streaming system with monetization, school and team pages, and integrated streaming workflows. The system still works fully offline when internet is unavailable.</p>
3206                  </div>
3207
3208                  <div class="col-lg-3 sideline-differ-column sideline-card">
3209                    <img src="https://snipback.com/assets/images/home/handshake-yellow.svg" class="img-fluid" alt="">
3210                    <h3 class="mb-0">
3211                        Integrated Snipback<br/>Handshake
3212                    </h3>
3213                    
3214                      <p style="font-size: 12px!important;line-height: 12px!important;color: #ffffff;opacity: 0.8;margin-bottom: 3px;">
3215                        SnipBack is not affiliated with or endorsed by Hudl. Hudl is a registered trademark of Agile Sports Technologies, Inc.
3216                      </p>
3217                    <p>Film captured with Snipback sideline can automatically flow into Hudl, making snipback 
3217ideal for teams that want best-in-class sideline tools while mainitaining their Hudl workflow. Users can also initiate and message film exchange directly within snipback.</p>
3218                  </div>
3219
3220                  <div class="col-lg-12">
3221                    <h2 class="custom-mobile text-center mt-5 mb-0">See how SnipBack transforms the sideline.</h2>
3222                    <p class="text-center" style="color: #FFFFFFB3;">Fast setup. Instant Insights. Total staff synchronization</p>
3223                    <div class="text-center">
3224                        <a  href="https://calendly.com/snipbackai/site-demo?month=2026-01" target="_blank">
3225                         <button class="sideline-differ-button">Schedule a Demo</button>
3226                        </a>
3227                    </div>
3228                  </div>
3229
3230
3231             </div>
3232
3233       </section>      
3234
3235
3236
3237      <section class="section exchange exchange-section" id="exchange" style="margin-bottom: 0.5rem;">
3238        <div class="inner">
3239          <div class="center">
3240            <div class="eyebrow exchange-eyebrow">TWO WAYS TO HANDLE FILM EXCHANGE</div>
3241            <h1 class="exchange-title">Keep Your Exchange Workflow.<br class="custom-break"/>Upgrade Everything Else.</h1>
3242            <p class="lead exchange-lead">Choose the exchange option that fits your conference<br/>and program. You stay in control.</p>
3243          </div>
3244          <div class="exchange-cards">
3245            <article class="exchange-card exchange-card-left">
3246              <div class="badge">Option 1</div>
3247              <h3>SnipBack Exchange</h3>
3248              <p class="exchange-card-par" style="color: #000;opacity: 0.7;font-weight: 500;">Simple. Direct. No Hudl account required.</p>
3249
3250               <div class="parent-wrap-div">
3251
3252                <div class="parent-child-div" style="border-right: 1px solid #d2d2d2;padding-right: 2rem;">
3253                    
3254                    <div class="sideline-card-wrap sideline-card-wrap-custom">
3255                        <img src="https://web02-stg-ch.snipback.com/assets/images/home/tick-red.svg" class="img-fluid" alt="">
3256                        <div class=""> 
3257                            <p class="sideline-paragraph2">Hudl - formatted<br/>ZIP links</p>
3258                        </div>
3259                    </div>
3260 
3261                    <div class="sideline-card-wrap sideline-card-wrap-custom">
3262                        <img src="https://web02-stg-ch.snipback.com/assets/images/home/tick-red.svg" class="img-fluid" alt="">
3263                        <div class=""> 
3264                            <p class="sideline-paragraph2">Email2Upload for easy<br/>submissions</p>
3265                        </div>
3266                    </div>
3267
3268                </div>
3269
3270                <div class="parent-child-div"  style="padding-left: 2rem;">
3271                    
3272                    <div class="sideline-card-wrap sideline-card-wrap-custom">
3273                        <img src="https://web02-stg-ch.snipback.com/assets/images/home/tick-red.svg" class="img-fluid" alt="">
3274                        <div class=""> 
3275                            <p class="sideline-paragraph2">Works with any opponent<br/>platform</p>
3276                        </div>
3277                    </div>
3278 
3279                    <div class="sideline-card-wrap sideline-card-wrap-custom">
3280                        <img src="https://web02-stg-ch.snipback.com/assets/images/home/tick-red.svg" class="img-fluid" alt="">
3281                        <div class=""> 
3282                            <p class="sideline-paragraph2">Fast, reliable, and cost -<br/>effective.</p>
3283                        </div>
3284                    </div>
3285
3286                </div>
3287
3288               </div>
3289
3290              <div class="trade">
3291                <img src="https://web02-stg-ch.snipback.com/assets/images/home/scale.svg" class="img-fluid" alt="">
3292                <p class="mb-0">Best for programs looking for<br class="custom-break"/>simplicity and flexibility.</p>
3293            </div>
3294            </article>
3295            <article class="exchange-card exchange-card-right">
3296              <div class="badge">Option 2</div>
3297              <h3 class="mb-0">Snipback Handshake</h3>
3298              <p style="font-size: 12px!important;line-height: 12px!important;color: #000000;opacity: 0.8;margin-bottom: 3px;">
3299                SnipBack is not affiliated with or endorsed by Hudl. Hudl is a registered trademark of Agile Sports Technologies, Inc.
3300              </p>
3301              <p class="exchange-card-par" style="color: #000;opacity: 0.7;font-weight: 500;">Stay in Hudl. We handle the heavy lifting.</p>
3302
3303             <div class="parent-wrap-div">
3304
3305                <div class="parent-child-div" style="border-right: 1px solid #d2d2d2;padding-right: 2rem;">
3306                    
3307                    <div class="sideline-card-wrap" style="border-bottom:none!important;">
3308                        <img src="https://web02-stg-ch.snipback.com/assets/images/home/tick-red.svg" class="img-fluid" alt="">
3309                        <div class=""> 
3310                            <p class="sideline-paragraph2">School owned<br/>Hudl account</p>
3311                        </div>
3312                    </div>
3313 
3314                    <div class="sideline-card-wrap sideline-card-wrap-custom">
3315                        <img src="https://web02-stg-ch.snipback.com/assets/images/home/tick-red.svg" class="img-fluid" alt="">
3316                        <div class=""> 
3317                            <p class="sideline-paragraph2">SnipBack<br/>Administrative Support</p>
3318                        </div>
3319                    </div>
3320
3321                </div>
3322
3323                <div class="parent-child-div" style="padding-left: 2rem;">
3324                    
3325                    <div class="sideline-card-wrap sideline-card-wrap-custom">
3326                        <img src="https://web02-stg-ch.snipback.com/assets/images/home/tick-red.svg" class="img-fluid" alt="">
3327                        <div class=""> 
3328                            <p class="sideline-paragraph2">Opponents keep their normal<br/>Hudl process</p>
3329                        </div>
3330                    </div>
3331 
3332                    <div class="sideline-card-wrap sideline-card-wrap-custom">
3333                        <img src="https://web02-stg-ch.snipback.com/assets/images/home/tick-red.svg" class="img-fluid" alt="">
3334                        <div class=""> 
3335                            <p class="sideline-paragraph2">Secure, reliable and fully<br/>supported</p>
3336                        </div>
3337                    </div>
3338
3339                </div>
3340
3341               </div>
3342
3343              <div class="trade">
3344                <img src="https://web02-stg-ch.snipback.com/assets/images/home/scale.svg" class="img-fluid" alt="">
3345                </>
3346                <p class="mb-0">Best for programs that want to stay<br class="custom-break"/>
3346inside the Hudl ecosystem*</p>
3347            </article>
3348          </div>
3349          <div class="row pt-5">
3350            <div class="col-lg-12">
3351                    <h5 class="text-center film-exchange-content-sub mb-4">Change later if your needs change. We make it easy.</h5>
3352                    <!-- <div class="text-center">
3353                        <button class="exchange-footer">Learn More About Exchange Options</button>
3354                    </div> -->
3355            </div>
3356          </div>
3357        </div>
3358      </section>
3359      
3360      <section  class="section football-sec-banner">
3361        <div class="row">
3362            <div class="col-lg-8">
3363                <h4 class="upgrade-par1">
3364                    Upgrade when you're ready
3365                </h4>
3366                <h1 class="upgrade-par2">SnipBack Zero-Setup<sup>TM</sup></h1>
3367                <h4 class="upgrade-par3">Permanent. Automated. Always Ready.</h4>
3368                <p class="upgrade-par4">Zero-Setup cameras are permanently installed at your stadium, gym, or field - ready to capture every game and practice automatically.</p>
3369                <!-- <div class="football-sec-button-wrap">
3370                    <button class="football-sec-button1">See Zero - Setup</button>
3371                    <button class="football-sec-button2">Company Solution</button>
3372                </div> -->
3373
3374            </div>
3375        </div>
3376
3377        <div class="footbal-sec-wrap-section">
3378            <p class="mb-0"><span class="spn-img"><img src="https://snipback.com/assets/images/home/capture.png" class="img-fluid" alt=""></span>AUTO CAPTURE</p>
3379            <div class="vertical-line"></div>
3380            <p class="mb-0"><span class="spn-img"><img src="https://snipback.com/assets/images/home/upload.png" class="img-fluid" alt=""></span>INSTANT UPLOAD</p>
3381            <div class="vertical-line"></div>
3382            <p class="mb-0"><span class="spn-img"><img src="https://snipback.com/assets/images/home/smart.png" class="img-fluid" alt=""></span>SMART ANALYTICS</p>
3383        </div>
3384
3385      </section>
3386
3387      <section class="camera-header-wrap camera-section">
3388        <div class="container">
3389            <div class="row">
3390                <div class="col-lg-12">
3391                    <h1 class="text-center mb-5 camera-title">
3392                        Powerful & Adaptable<br/>Camera Ecosystem
3393                    </h1>
3394                </div>
3395            </div>
3396
3397            <div class="row">
3398                <div class="col-lg-3 text-center custom-cam-column camera-card">
3399                   <div class="camera-card-inner">
3400                    <img src="https://snipback.com/assets/images/home/apex-cam-custom.png" class="img-fluid cam-custom-img1" alt="">
3401                    <h6 class="camera-wrap-custom text-center">APEX DUO</h6>
3402                    <p class="text-center">Economical Power for Secondary<br/>Angles & Expanded Coverage</p>
3403                   </div>
3404                </div>
3405                <div class="col-lg-3 text-center custom-cam-column camera-card">
3406                    <div class="camera-card-inner">
3407                    <img src="https://snipback.com/assets/images/home/vision-cam-custom.png" class="img-fluid cam-custom-img2" alt="">
3408                    <h6 class="camera-wrap-custom text-center">VISION DUO</h6>
3409                    <p class="text-center">Economical Power for Secondary<br/>Angles & Expanded Coverage</p>
3410                 </div>
3411                </div>
3412                <div class="col-lg-3 text-center custom-cam-column camera-card">
3413                    <div class="camera-card-inner">
3414                    <img src="https://snipback.com/assets/images/home/lightweight-cam.png" class="img-fluid cam-custom-img3" alt="">
3415                    <h6 class="camera-wrap-custom text-center">VISION PTZ</h6>
3416                    <p class="text-center">Lightweight. Reliable. Always<br/>Game-Ready.</p>
3417                 </div>
3418                </div>
3419                <div class="col-lg-3 text-center custom-cam-column camera-card">
3420                  <div class="camera-card-inner camera-card-inner-custom">
3421                    <img src="https://snipback.com/assets/images/home/drone.png" class="img-fluid cam-custom-img4" alt="">
3422                    <h6 class="camera-wrap-custom text-center" style="margin-top: 2rem;">DRONE</h6>
3423                    <p class="text-center">
3423Integrated with hdmi out<br/>remote + adapter</p>
3424                  </div>
3425                </div>
3426                <div class="col-lg-6 text-center custom-cam-column camera-card">
3427                  <div class="camera-card-inner mt-3 d-flex">
3428                    <img src="https://snipback.com/assets/images/home/disk.png" class="img-fluid disk-img" alt="">
3429                    <div class="cam-wrap">
3430                    <h7 class="cam-span-custom" style="color:#E1261C">NEW - MOBILE AI</h7>
3431                    <h6 class="camera-wrap-custom" style="margin-top:0px">AI TRACKING CAM</h6>
3432                    <p class="camera-wrap-custom-par camera-wrap-custom-par-disk"><span style="color:#000000;font-weight: bold;">AI tracking mobile cam for soccer & basketball.</span> Note: does not work with multi-view sync. First year $ 1,500,$500/year thereafter.<br/> Note: requires existing platform license at any tier</p>
3433                   </div>
3434                  </div>
3435                </div>
3436
3437                <div class="col-lg-6 text-center custom-cam-column camera-card">
3438                  <div class="camera-card-inner custom-ios mt-3 d-flex">
3439                    <img src="https://snipback.com/assets/images/home/ios-cam.png" class="img-fluid ios-img" alt="">
3440                    <div class="cam-wrap">
3441                    <h7 class="cam-span-custom" style="color:#E1261C">BRING YOUR OWN</h7>
3442                    <h6 class="camera-wrap-custom" style="margin-top:0px">IOS DEVICES</h6>
3443                    <p class="camera-wrap-custom-par camera-wrap-custom-par-ios">
3443Easily extend ecosystem with any iOS device.<span style="color:#000000;font-weight: bold;">Supports AI basketball tracking</span></p>
3444                  </div>
3445                  </div>
3446                </div>
3447                
3448            </div>
3449        </div>
3450
3451      </section>
3452
3453      <section class="feature-section">
3454        <div class="container">
3455           <div class="row">
3456            <div class="col-lg-4 feature-card">
3457                <img src="https://snipback.com/assets/images/home/film-rivew.png" class="img-fluid mb-4" alt="">
3458                <h4  class="text-center">Powerful Film Review</h4>
3459                <p  class="text-center par-opacity">Multi-view. Tags. Snips. Whiteboard.<br/>All in one place.</p>
3460                <!-- <div class="text-center btn-whole-wrap">
3461                    <button>See Review Tools</button>
3462                </div> -->
3463            </div>
3464    
3465            <div class="col-lg-4 feature-card">
3466                <img src="https://snipback.com/assets/images/home/playbook.png" class="img-fluid mb-4" alt="">
3467                <h4  class="text-center">Live Charting & Playbooks</h4>
3468                <p  class="text-center par-opacity">Chart live. Tag faster. Connect film<br/>to your game plan.</p>
3469                <!-- <div class="text-center btn-whole-wrap">
3470                    <button>Explore Charting</button>
3471                </div> -->
3472            </div>
3473    
3474            <div class="col-lg-4 feature-card">
3475                <img src="https://snipback.com/assets/images/home/analytics.png" class="img-fluid mb-4" alt="">
3476                <h4  class="text-center">Snip Assist & Analytics</h4>
3477                <p  class="text-center par-opacity">Interactive stats. Reports. Insights<br/>that win games.</p>
3478                <!-- <div class="text-center btn-whole-wrap">
3479                    <button>View Analytics</button>
3480                </div> -->
3481            </div>
3482    
3483           </div>
3484    
3485          </div>
3486
3487      </section>
3488        <section class="testimonial-section">
3489            <div class="container">
3490                <div class="row">
3491        
3492                    <!-- Happy Customer -->
3493                    <div class="col-lg-6 col-md-6 col-12">
3494                        <h2 class="section-title custom-section-title">Happy Customer's</h2>
3495        
3496                        <div class="customer-slider">
3497        
3498                            <div class="customer-slide">
3499                                <div class="logo-grid">
3500        
3501                                    <div class="logo-card">
3502                                        <img src="https://snipback.com/assets/images/home/schoolpic1.svg" class="img-fluid">
3503                                    </div>
3504        
3505                                    <div class="logo-card">
3506                                        <img src="https://snipback.com/assets/images/home/schoolpic2.svg" class="img-fluid">
3507                                    </div>
3508                                    <div class="logo-card">
3509                                    <img src="https://snipback.com/assets/images/home/schoolpic3.svg" class="img-fluid">
3510                                    </div>
3511                                    <div class="logo-card">
3512                                    <img src="https://snipback.com/assets/images/home/schoolpic4.svg" class="img-fluid">
3513                                    </div>
3514                                    <div class="logo-card">
3515                                    <img src="https://snipback.com/assets/images/home/schoolpic5.svg" class="img-fluid">
3516                                    </div>
3517                                    <div class="logo-card">
3518                                    <img src="https://snipback.com/assets/images/home/schoolpic6.svg" class="img-fluid">
3519                                    </div>
3520                                    <div class="logo-card">
3521                                    <img src="https://snipback.com/assets/images/home/schoolpic7.svg" class="img-fluid">
3522                                    </div>
3523                                    <div class="logo-card">
3524                                    <img src="https://snipback.com/assets/images/home/sch
3524oolpic8.svg" class="img-fluid">
3525                                    </div>
3526                                    <div class="logo-card">
3527                                    <img src="https://snipback.com/assets/images/home/schoolpic9.png" class="img-fluid">
3528                                    </div>
3529                                    <div class="logo-card">
3530                                    <img src="https://snipback.com/assets/images/home/schoolpic10.svg" class="img-fluid">
3531                                    </div>
3532                                    <div class="logo-card">
3533                                    <img src="https://snipback.com/assets/images/home/schoolpic11.svg" class="img-fluid">
3534                                    </div>
3535                                    <div class="logo-card">
3536                                    <img src="https://snipback.com/assets/images/home/schoolpic12.png" class="img-fluid">
3537                                    </div>
3538                                    <div class="logo-card">
3539                                    <img src="https://snipback.com/assets/images/home/schoolpic13.png" class="img-fluid">
3540                                    </div>
3541                                    <div class="logo-card">
3542                                    <img src="https://snipback.com/assets/images/home/schoolpic14.svg" class="img-fluid">
3543                                    </div>
3544        
3545                                    <!-- 12 logos -->
3546        
3547                                </div>
3548                            </div>
3549        
3550                            <div class="customer-slide">
3551                                <div class="logo-grid">
3552                                    
3553
3554                                    <div class="logo-card">
3555                                        <img src="https://snipback.com/assets/images/home/college1.svg" class="img-fluid">
3556                                    </div>
3557                                    <div class="logo-card">
3558                                    <img src="https://snipback.com/assets/images/home/college2.svg" class="img-fluid">
3559                                    </div>
3560                                    <div class="logo-card">
3561                                    <img src="https://snipback.com/assets/images/home/college3.svg" class="img-fluid">
3562                                    </div>
3563                                    <div class="logo-card">
3564                                    <img src="https://snipback.com/assets/images/home/college4.svg" class="img-fluid">
3565                                    </div>
3566                                    <div class="logo-card">
3567                                    <img src="https://snipback.com/assets/images/home/college5.png" class="img-fluid">
3568                                    </div>
3569                                    <div class="logo-card">
3570                                    <img src="https://snipback.com/assets/images/home/college6.png" class="img-fluid">
3571                                    </div>
3572
3573
3574                                </div>
3575                            </div>
3576
3577
3578                            <div class="customer-slide">
3579                                <div class="logo-grid">
3580                                    <div class="logo-card">
3581                                      <img src="https://snipback.com/assets/images/home/club1.svg" class="img-fluid">
3582                                    </div>
3583                                    <div class="logo-card">
3584                                    <img src="https://snipback.com/assets/images/home/club2.svg" class="img-fluid">
3585                                    </div>
3586                                    <div class="logo-card">
3587                                    <img src="https://snipback.com/assets/images/home/club3.svg" class="img-fluid">
3588                                    </div>
3589                                    <div class="logo-card">
3590                                    <img src="https://snipback.com/assets/images/home/club4.svg" class="img-fluid">
3591                                    </div>
3592                                    <div class="logo-card">
3593                                    <img src="https://snipback.com/assets/images/home/club5.svg" class="img-fluid">
3594                                    </div>
3595                                    <div class="logo-card">
3596                                    <img src="https://snipback.com/assets/images/home/club6.svg" class="img-fluid">
3597                                    </div>
3598                                    <div class="logo-card">
3599                                    <img src="https://snipback.com/assets/images/home/club7.svg" class="img-fluid">
3600                                    </div>
3601                                    <div class="logo-card">
3602                                    <img src="https://snipback.com/assets/images/home/club8.svg" class="img-fluid">
3603                                    </div>
3604                                    <div class="logo-card">
3605                                    <img src="https://snipback.com/assets/images/home/club9.svg" class="img-fluid">
3606                                    </div>
3607                                    <div class="logo-card">
3608                                    <img src="https://snipback.com/assets/images/home/club10.svg" class="img-fluid">
3609                                    </div>
3610                                </div>
3611                            </div>    
3612
3613        
3614                        </div>
3615                    </div>
3616        
3617                    <!-- Testimonial -->
3618                    <div class="col-lg-6 col-md-6 col-12 testimony-column">
3619                        <h2 class="section-title">
3619Client Testimonials</h2>
3620        
3621                        <div class="testimonial-slider">
3622        
3623                            <div class="testimonial-item">
3624                                <div class="quote-icon"><img src="https://snipback.com/assets/images/home/client-testimony.svg" class="img-fluid"></div>
3625        
3626                                <p>
3627                                    “SnipBack is a coaches dream! The use of film to teach the game is imperative these days - whether you are coaching, training, or scouting, film is an ever-increasing tool being used! SnipBack allows that feedback in real-time! It’s extremely user friendly and is an incredibly affordable solution for coaches, athletes, parents, trainers of all sports!”
3628                                </p>
3629        
3630                                <h5>
3631                                    Former Collegiate Coach and Current PGC Director
3632                                </h5>
3633                            </div>
3634        
3635                            <div class="testimonial-item">
3636                                <div class="quote-icon"><img src="https://snipback.com/assets/images/home/client-testimony.svg" class="img-fluid"></div>
3637        
3638                                <p>
3639                                    
3640                                    “As we all know Technology is constantly changing how we watch,
3641                                    train,
3642                                    teach and evaluate athletes in sports today.
3643                                    We all talk about game changers, look no further. SnipBack covers
3644                                    everything. Where do I begin? There are no weaknesses. Being a
3645                                    former
3646                                    athlete to now teaching and training young athletes i'm impressed
3647                                    with
3648                                    this video tool. The Best!”
3649                                                
3650                                </p>
3651        
3652                                <h5>
3653                                 Former NFL Player and Current National Director for Football
3654                                </h5>
3655                            </div>
3656
3657                            <div class="testimonial-item">
3658                                <div class="quote-icon"><img src="https://snipback.com/assets/images/home/client-testimony.svg" class="img-fluid"></div>
3659        
3660                                <p>
3661
3662                                “SnipBack, provides an easy game day or practice setup with minimal
3663                                 equipment while improving video clarity/functionality when compared to
3664                                 other systems used in the past.”
3665
3666                                </p>
3667        
3668                                <h5>
3669                                    
3670                                 
3671                                    Current High School Varsity Football Coach
3672                                                
3673                                                
3674                                </h5>
3675                            </div>
3676        
3677                        </div>
3678                    </div>
3679        
3680                </div>
3681            </div>
3682        </section>
3683        <!-- Testimonial -->
3684
3685
3686
3687    </div>
3688
3689
3690    
3691
3692        <!-- contact-us modal -->
3693        <div class="modal no-curve fade custom-modal lenis lenis-smooth" id="contactModal" tabindex="2"
3694            aria-labelledby="conatctModalLabel" aria-hidden="true">
3695            <div class="modal-dialog modal-dialog-centered">
3696                <div class="modal-content">
3697                    <div class="modal-body">
3698                        <div class="contact-us-outer">
3699                            <div class="container">
3700                                <div class="main-heading flex">
3701                                    <div class="left">
3702                                        <button class="btn close-btn" data-bs-dismiss="modal" aria-label="Close"
3703                                            title="Close"><i class="icon icon-close sm"></i></button>
3704                                    </div>
3705                                    <div class="right">
3706                                        <h2>Contact Us</h2>
3707                                        <p>We're here to help and answer any question you might have.<br
3708                                                class="desktop"> We
3709                                            look forward to hearing from you.</p>
3710                                    </div>
3711                                </div>
3712                                <div class="contact-us-form-wrap">
3713                                    <form action="">
3714                                        <div class="row gy-4">
3715                                            <div class="col-lg-12">
3716                                                <label for="contact_name" class="form-label">
3716Name</label>
3717                                                <input type="text" class="form-control contact_us-form "
3718                                                    id="contact_name" placeholder="">
3719                                            </div>
3720                                            <div class="col-lg-6">
3721                                                <label for="contact_email" class="form-label">Email Address</label>
3722                                                <input type="email" class="form-control contact_us-form "
3723                                                    id="contact_email" placeholder="">
3724                                            </div>
3725                                            <div class="col-lg-6">
3726                                                <label for="contact_phone" class="form-label">Phone</label>
3727                                                <div class="mobile-wrap">
3728                                                    <select class="form-control mobile-code"
3729                                                        id="contact_country_code"></select>
3730                                                    <input type="number"
3731                                                        class="form-control contact_us-form mobile-number numbers-only"
3732                                                        id="contact_phone" placeholder=""
3733                                                        oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
3734                                                        maxlength="16">
3735                                                </div>
3736                                            </div>
3737                                            <div class="col-lg-12">
3738                                                <label for="contact_description"
3739                                                    class="form-label ">Description</label>
3740                                                <textarea class="form-control contact_us-text-area non-common" id="contact_description" rows="5"></textarea>
3741                                            </div>
3742                                        </div>
3743                                    </form>
3744                                </div>
3745                                <div class="submit-btn-wrap">
3746                                    
3747                                    <button class="btn btn-outline-dark sm submit_contact"
3748                                        onclick="sendContactFormData();"><i
3749                                            class="icon icon-plus"></i>Submit</button>
3750                                </div>
3751                            </div>
3752                        </div>
3753                    </div>
3754                </div>
3755            </div>
3756        </div>
3757
3758        <!--mobile sidebar -->
3759        <div class="sidebar offcanvas offcanvas-start" tabindex="-1" id="main-sidebar"
3760            aria-labelledby="mainSidebarLabel">
3761            <div class="offcanvas-header end">
3762                <button type="button" class="btn close-btn" data-bs-dismiss="offcanvas" aria-label="Close"><i
3763                        class="icon icon-close"></i></button>
3764            </div>
3765            <div class="offcanvas-body">
3766                <div class="main-logo">
3767                    <img src="https://snipback.com/assets/images/home/mobile-logo.png" alt="logo">
3768                </div>
3769                <ul class="menu-wrap">
3770                    <li class="menu-item">
3771
3772                        <a href="/" class="menu_link ">Home</a>
3773                    </li>
3774                    <li class="menu-item">
3775                        <a href="/film" class="menu_link ">Film</a>
3776                    </li>
3777                    
3778                    <li class="menu-item">
3779                        <a href="/pricing"
3780                            class="menu_link ">Pricing</a>
3781                    </li>
3782
3783                    <li class="menu-item">
3784                    
3785                        <div>
3786                            <button class="btn btn-white md" data-bs-toggle="modal" data-bs-target="#login-modal">Login</button>
3787                        </div>
3788                    </li>
3789
3790                </ul>
3791
3792            </div>
3793        </div>
3794        <!------------------------------Modal Login ---------------------------------------------------------------->
3795
3796        <!-- login modal -->
3797<div class="modal login-modal lenis lenis-smooth custom-modal fade" id="login-modal" tabindex="-1"
3798    data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="LoginModalLabel" aria-hidden="true">
3799    <!--  style="top: 80px;" -->
3800    <div class="modal-dialog">
3801        <div class="modal-content">
3802            <div class="modal-header">
3803                <div class="logo-wrap">
3804                    <img src="https://snipback.com/assets/images/home/logo-dark.png" alt="logo">
3805                </div>
3806                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
3807            </div>
3808            <div class="modal-body">
3809                <form id="userlogin" class="login-form">
3810                    <div class="row gy-4">
3811                        <!-- danger Alert -->
3812                        <div class="alert alert-danger" id="login_result" role="alert" style="display: none;">
3813                            <strong> Incorrect Email Address or Password </strong>
3814                        </div>
3815                        <div class="col-lg-12">
3816                            <div class="form-group">
3817                                <div class="input-group">
3818                                    <span class="input-group-text">
3819                                        <i class="icon icon-email sm"></i>
3820                                    </span>
3821                                    <input type="email" class="form-control form-input input-img1" name="emailaddress"
3822                                        id="email_address" placeholder="Email Address">
3823                                </div>
3824                                <div class="error"> <span class="text-danger text-danger validatnText"
3825                                        id="errr_email"></span> </div>
3826                            </div>
3827                        </div>
3828                        <div class="col-lg-12">
3829                            <div class="form-group">
3830                                <div class="input-group">
3831                                    <span class="input-group-text">
3832                                        <i class="icon icon-security sm"></i>
3833                                    </span>
3834                                    <div class="password-container">
3835                                        <input type="password" id="password" name="userpassword" oninput="return checkPasswordStrength(this)" class="form-control form-input input-img2" placeholder="Password" >
3836                                        <i class="fa fa-eye-slash show-password" aria-hidden="true"></i> 
3837                                    </div>
3838                                </div>
3839                                <div class="error"> <span class="text-danger text-danger validatnText"
3840                                        id="err_password"></span> </div>
3841                            </div>
3842                        </div>
3843
3844                        <div class="col-lg-12">
3845
3846                        </div>
3847
3848                        <div class="col-lg-12">
3849                            <div class="submit-btn">
3850                                <button id="login_submit" onclick="myFunction()"
3851                                    class="btn btn-primary sm btn-submit">SIGN IN<i class="fa fa-spinner fa-spin"
3852                                        style="display:none"></i></button>
3853                            </div>
3854                        </div>
3855                    </div>
3856                </form>
3857                <div class="forget-password-wrap">
3858                    <a href="/email_resetpassword" class="forget-password">Forgot password?</a>
3859                </div>
3860                <div class="sign-in-button">
3861                    <a href="https://snipback.com/login/google" class="btn btn-white signin-btn sm"><i
3862                            class="icon icon-google-black sm"></i> Sign In with Google</a>
3863                    <a href="https://snipback.com/login/apple" class="btn btn-white signin-btn sm"><i
3864                            class="icon icon-apple-black sm"></i> Sign In with Apple</a>
3865                </div>
3866            </div>
3867            <div class="modal-footer">
3868                <div class="signup-btn">
3869                    <small><a href="/signup">Sign Up</a> for SNIPBACK</small>
3870                    <a href="/resend_credential"
3871                        style="font-size:13px !important;line-height: normal !important;font-weight: 400;color:black !important"><span
3872                            style="color: #e1261c;">Resend</span> Credentials</a>
3873                </div>
3874            </div>
3875        </div>
3876    </div>
3877</div>
3878
3879        <!---------------------------------------------------------------------------------------------------------->
3880
3881        <!-- footer -->
3882        <footer class="footer-section">
3883            <div class="container">
3884        
3885                <div class="footer-grid">
3886        
3887                    <!-- Left -->
3888                    <div class="footer-brand">
3889                        <img src="https://snipback.com/assets/images/home/logo-large.png" alt="SnipBack">
3890        
3891                        <p>
3892                            The all-in-one sports film platform<br/>
3893                            for every program and every sport.
3894                        </p>
3895        
3896                        <div class="social-icons">
3897                            <a href="https://www.facebook.com/snipbackapp/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
3898                            <a href="https://twitter.com/snipbackapp" target="_blank" title="Twitter"><i class="fab fa-twitter"></i></a>
3899                            <a href="https://www.instagram.com/snipbackpro/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
3900                            <a href="https://www.linkedin.com/showcase/snipback/" target="_blank" title="Linkedin"><i class="fab fa-linkedin-in"></i></a>
3901                            <a href="https://www.youtube.com/channel/UCfBiqr-7am068jPwRVwsOmA/videos" target="_blank"
3902                            title="YouTube"><i class="fab fa-youtube"></i></a>
3903                        </div>
3904                    </div>
3905        
3906                    <!-- Center -->
3907                    <div class="footer-links">
3908                        <h3>Explore SnipBack</h3>
3909        
3910                        <div class="footer-menu">
3911                            <div>
3912                                <a href="#">Platform</a>
3913                                <a href="#">Integrations</a>
3914                                <a href="https://snipback.com/pricing">Pricing</a>
3915                            </div>
3916        
3917                            <div>
3918                                <a href="#">Solutions</a>
3919                                <a href="#">Resources</a>
3920                                <a href="#">Company</a>
3921                            </div>
3922                        </div>
3923                    </div>
3924        
3925                    <!-- Right -->
3926                    <div class="footer-cta">
3927                        <h3>Ready to see it in<br/>action?</h3>
3928        
3929                        <p>
3930                            Schedule a demo and see how<br/>
3931                            SnipBack AI can elevate your<br/>
3932                            program.
3933                        </p>
3934        
3935                        <a  href="https://calendly.com/snipbackai/site-demo?month=2026-01" target="_blank" class="demo-btn">
3936                            Schedule a Demo
3937                        </a>
3938                    </div>
3939        
3940                </div>
3941    
3942        
3943            </div>
3944        </footer>
3945         <div class="newFooterSection">
3946            <div class="footer-outer">
3947                <div class="footer-sub-inner">
3948                    <div class="social-media-btn">
3949                        <a href="https://www.facebook.com/snipbackapp/" target="_blank" title="Facebook"><i
3950                                class="icon icon-facebook"></i></a>
3951                        <a href="https://twitter.com/snipbackapp" target="_blank" title="Twitter"><i
3952                                class="icon icon-twitter"></i></a>
3953                        <a href="https://www.instagram.com/snipbackpro/" target="_blank" title="Instagram"><i
3954                                class="icon icon-instagram"></i></a>
3955                        <a href="https://www.linkedin.com/showcase/snipback/" target="_blank" title="Linkedin"><i
3956                                class="icon icon-linkedin"></i></a>
3957                        <a href="https://www.youtube.com/channel/UCfBiqr-7am068jPwRVwsOmA/videos" target="_blank"
3958                            title="YouTube"><i class="icon icon-youtube"></i></a>
3959                    </div>
3960                    <div class="copyright-text">
3961                        <small>Copyright © 2026 SnipBack. All rights reserved. | <a
3962                                href="https://snipback.com/terms-of-use">Terms &amp; Conditions</a> | <a
3963                                href="https://snipback.com/privacypolicy">Privacy Policy</a>
3964                         <a>| * SnipBack is not affiliated with or endorsed by Hudl. <br>Hudl is a registered trademark of Agile Sports Technologies, Inc</a>                       
3965                        </small>
3966                    </div>
3967                </div>
3968            </div>
3969        </div>
3970<script>
3971          const toggle = document.getElementById('menuToggle');
3972    const dropdown = document.getElementById('headerDropdown');
3973    toggle.addEventListener('click',function(e){
3974    
3975        e.stopPropagation();
3976    
3977        dropdown.classList.toggle('show');
3978    
3979    });
3980    
3981    document.addEventListener('click',function(){
3982    
3983        dropdown.classList.remove('show');
3984    
3985    });
3986    
3987    dropdown.addEventListener('click',function(e){
3988    
3989        e.stopPropagation();
3990    
3991    });
3992</script>
3992        
3993        <input type="hidden" id="jointeamstatus" value="-1">
3994        <input type="hidden" id="jointeammsg" value="">
3995    
3995<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"62bc6ed1718e45e486e55eef04d11348","spa":2}' crossorigin="anonymous"></script>
3995
3996</body>
3997
3998        <!-- script -->
3999    
4000    
4000<script type="text/javascript">
4001        var widget = "-1";
4002        var devTool = '1';
4003        var devAccess = '363,1932,1705,197,4948,1707,10143,12218,8186,13829,5993,177,312,14461,16136,17158,20570,1005,571,1930,12703,20444,38765';
4004    </script>
4004
4005
4006    
4007    <link rel="icon" type="image/x-icon"
4008        href="https://snipback.com/images/favicon.png?v=1791586681">
4009    <link rel="stylesheet" href="/mix/css/fonts.css?id=e4b09bb4cb8938f35e46df4955aa1ba5">
4010    <link rel="stylesheet" href="/mix/css/modalcss.css?id=08e44d3ed6b4ca1ebad8f5b79143ed6e">
4011    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
4012    <!-- Game page -->
4013    <!-- flickity link from CDN -->
4014
4015    <link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet">
4016    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.min.css"
4017        referrerpolicy="no-referrer" />
4018    <link href="https://snipback.com/css/fonts.googleapis.min.css" rel="stylesheet">
4019    <link rel="stylesheet" href="/mix/css/web.css?id=1f53bbfa31c871e37c661387b2c10495">
4020    <link rel="stylesheet" href="/mix/css/styles.css?id=ee223b988e4b776545c47fcb3256fa18">
4021    <!-- slider -->
4022    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />
4023    <link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
4024    <link rel="stylesheet" rel="dns-prefetch"
4025        href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
4026    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
4027    <link rel="stylesheet" href="/mix/css/bootstrap-datetimepicker.css?id=043936f730d16d4f25761de92357c1e9">
4028    <!-- Games new layout -->
4029    <link rel="stylesheet"
4030        href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
4031    <!-- Gsap -->
4032    
4032<script src="https://snipback.com/js/custom.min.js"></script>
4032
4033    
4033<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
4033
4034    
4034<script src="https://snipback.com/assets/js/gsap.min.js"></script>
4034
4035    
4035<script src="https://snipback.com/assets/js/ScrollTrigger.min.js"></script>
4035
4036    
4036<script src="https://snipback.com/assets/js/ScrollToPlugin.min.js"></script>
4036
4037    
4037<script src="/mix/js/custom.js?id=21edc4624e392123933df1c548b0be8f" defer></script>
4037
4038    
4038<script src="https://snipback.com/assets/js/bootstrap.bundle.min.js"></script>
4038
4039    
4039<script src="/mix/js/common-home-script.js?id=4300a10a85294548e27b2ac4260adfb2" defer></script>
4039
4040
4041    <!-- locomotive scroll -->
4042    
4042<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/bundled/locomotive-scroll.min.js"></script>
4042
4043    
4043<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
4043
4044    <!-- magnify -->
4045    
4045<script src="/mix/js/jquery.magnify.js?id=dc5050cf06b5f0d5b8be252983d8597a" defer></script>
4045
4046    
4046<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.2/flickity.pkgd.min.js" referrerpolicy="no-referrer">
4047    </script>
4047
4048    <!-- slider -->
4049    
4049<script src="https://snipback.com/js/home/slick.min.js"></script>
4049
4050    
4050<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
4050
4051
4052    
4052<script type="application/ld+json">
4053{
4054    "@context": "https://schema.org/",
4055    "@type": "WebSite",
4056    "name": "snipback",
4057    "url": "https://snipback.com/",
4058    "potentialAction": {
4059        "@type": "SearchAction",
4060        "target": "{search_term_string}",
4061        "query-input": "required name=search_term_string"
4062    }
4063}
4064  </script>
4064
4065    <!-- Added by Akhil --->
4066        
4066<script>
4067        $(document).ready(function() {
4068
4069            $(window).on('load', function() {
4070                $('body').addClass('loaded');
4071                $('.loader-wrapper').fadeOut();
4072            });
4073
4074            $('.main-carousel').flickity({
4075                // options
4076                cellAlign: 'center',
4077                contain: true,
4078                adaptiveHeight: true,
4079                autoPlay: 8000,
4080            });
4081
4082        });
4083    </script>
4083
4084    
4084<script>
4085        $('.customer-slider').slick({
4086            arrows:false,
4087            dots:true,
4088            autoplay:false,
4089            autoplaySpeed:3000
4090        });
4091        
4092        $('.testimonial-slider').slick({
4093            arrows:false,
4094            dots:true,
4095            autoplay:false,
4096            autoplaySpeed:3000,
4097            adaptiveHeight:true
4098        });
4099    </script>
4099
4100    
4100<script>
4101        $(document).ready(function() {
4102
4103            // Initialize the first carousel immediately
4104            var $carousel1 = $('.main-carousel-custom').flickity({
4105                cellAlign: 'center',
4106                contain: true,
4107                adaptiveHeight: false,
4108                autoPlay: 3000,
4109                pageDots: false // Disable default Flickity dots
4110            });
4111
4112            // Ensure click event binds correctly for custom dots
4113            $(document).on('click', '.flick-dot', function() {
4114                var index = $(this).index('.flick-dot'); // Correct way to get the index among all dots
4115                $carousel1.flickity('select', index);
4116            });
4117
4118            // Update active dot when slide changes
4119            $carousel1.on('change.flickity', function(event, index) {
4120                $('.flick-dot').removeClass('active');
4121                $('.flick-dot').eq(index).addClass('active');
4122            });
4123
4124            // Set the first dot as active on page load
4125            $('.flick-dot').first().addClass('active');
4126
4127            var $carousel2 = null; // Don't initialize the second one yet
4128            // Fix: Listen to buttons with data-bs-toggle="pill"
4129            $('button[data-bs-toggle="pill"]').on('shown.bs.tab', function(e) {
4130                var target = $(e.target).data('bsTarget'); // Bootstrap 5 uses 'bsTarget' not 'href'
4131
4132                if (target === '#pills-contact') {
4133                    if (!$carousel2) {
4134                        $carousel2 = $('.main-carousel-custom-live').flickity({
4135                            cellAlign: 'center',
4136                            contain: true,
4137                            adaptiveHeight: true,
4138                            autoPlay: 3000
4139                        });
4140                    } else {
4141                        $carousel2.flickity('reloadCells');
4142                        $carousel2.flickity('resize');
4143                    }
4144                }
4145            });
4146
4147            jQuery('.customer-logos').slick({
4148                slidesToShow: 4,
4149                slidesToScroll: 1,
4150                autoplay: false,
4151                infinite: false,
4152                autoplaySpeed: 1500,
4153                arrows: true,
4154                dots: false,
4155                vertical: false,
4156                cssEase: 'linear',
4157                pauseOnHover: false,
4158
4159                responsive: [{
4160                        breakpoint: 900,
4161                        settings: {
4162                            slidesToShow: 2
4163                        }
4164                    },
4165                    {
4166                        breakpoint: 1020,
4167                        settings: {
4168                            slidesToShow: 3
4169                        }
4170                    }, {
4171                        breakpoint: 520,
4172                        settings: {
4173                            slidesToShow: 1
4174                        }
4175                    }
4176                ]
4177            });
4178        });
4179    </script>
4179
4180    
4180<script>
4181        document.querySelectorAll(".tab-btn").forEach(btn => {
4182            btn.addEventListener("click", function() {
4183
4184                // Remove active class from all buttons
4185                document.querySelectorAll(".tab-btn").forEach(b => b.classList.remove("active"));
4186                this.classList.add("active");
4187
4188                // Hide all content
4189                document.querySelectorAll(".tab-content").forEach(tab => tab.classList.remove("active"));
4190
4191                // Show selected content
4192                document.getElementById(this.dataset.tab).classList.add("active");
4193            });
4194        });
4195    </script>
4195
4196
4197    
4197<script type="text/javascript">
4198        _linkedin_partner_id = "6088906";
4199        window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
4200        window._linkedin_data_partner_ids.push(_linkedin_partner_id);
4201    </script>
4201
4202
4203    
4203<script type="text/javascript">
4204        (function(l) {
4205            if (!l) {
4206                window.lintrk = function(a, b) {
4207                    window.lintrk.q.push([a, b])
4208                };
4209                window.lintrk.q = []
4210            }
4211            var s = document.getElementsByTagName("script")[0];
4212            var b = document.createElement("script");
4213            b.type = "text/javascript";
4214            b.async = true;
4215            b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
4216            s.parentNode.insertBefore(b, s);
4217        })(window.lintrk);
4218    </script>
4218
4219
4220    
4220<script type="text/javascript" crossorigin="anonymous">
4221        var Chatstack = {
4222            server: 'hp-lv.hipoint.io'
4223        };
4224        (function(d, undefined) {
4225            // JavaScript
4226            Chatstack.e = [];
4227            Chatstack.ready = function(c) {
4228                Chatstack.e.push(c);
4229            }
4230            var b = d.createElement('script');
4231            b.type = 'text/javascript';
4232            b.async = true;
4233            b.src = ('https:' == d.location.protocol ? 'https://' : 'http://') + Chatstack.server +
4234                '/livehelp/scripts/js.min.js';
4235            var s = d.getElementsByTagName('script')[0];
4236            s.parentNode.insertBefore(b, s);
4237        })(document);
4238
4239        
4240        const togglePassword = document.getElementsByClassName('show-password');
4241        togglePassword[0].style.display = 'none';
4242        for(let i=0;i<togglePassword.length;i++){
4243            var passwordElement = "";
4244            passwordElement = togglePassword[i].previousElementSibling;
4245            if(passwordElement == null) {
4246                passwordElement = togglePassword[i].nextElementSibling;
4247            }
4248            if(passwordElement == null){
4249                break;
4250            }
4251            passwordElement.addEventListener('input', function () {
4252
4253                if (this.value.trim() !== '') {
4254                    togglePassword[i].style.display = 'block';
4255                } else {
4256
4257                    togglePassword[i].style.display = 'none';
4258
4259                    // Reset back to password type
4260                    this.setAttribute('type', 'password');
4261
4262                    togglePassword[i].classList.remove('fa-eye');
4263                    togglePassword[i].classList.add('fa-eye-slash');
4264                }
4265            });
4266            var passwordId = passwordElement.getAttribute('id');
4267            const passwordInput = document.getElementById(passwordId);
4268            togglePassword[i].addEventListener('click', function(){
4269                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
4270                passwordInput.setAttribute('type', type);
4271                this.classList.toggle('fa-eye');
4272                this.classList.toggle('fa-eye-slash');
4273            });
4274        };
4275    </script>
4275
4276        
4276<script>
4277        document.addEventListener("DOMContentLoaded", function () {
4278
4279        const images = document.querySelectorAll('.lazy-image');
4280    
4281        const observer = new IntersectionObserver((entries) => {
4282    
4283            entries.forEach(entry => {
4284    
4285                if (entry.isIntersecting) {
4286    
4287                    const img = entry.target;
4288    
4289                    img.src = img.dataset.src;
4290    
4291                    observer.unobserve(img);
4292                }
4293    
4294            });
4295    
4296        });
4297    
4298        images.forEach(img => observer.observe(img));
4299    
4300    });
4301    </script>
4301
4302    
4303    
4303<script>
4304      document.addEventListener("DOMContentLoaded", function () {
4305    
4306        const cards = document.querySelectorAll(".aud-card");
4307    
4308        const observer = new IntersectionObserver((entries) => {
4309    
4310            entries.forEach((entry, index) => {
4311    
4312                if (entry.isIntersecting) {
4313    
4314                    setTimeout(() => {
4315                        entry.target.classList.add("show");
4316                    }, index * 150);
4317    
4318                } else {
4319    
4320                    entry.target.classList.remove("show");
4321    
4322                }
4323    
4324            });
4325    
4326        }, {
4327            threshold: 0.2
4328        });
4329    
4330        cards.forEach(card => observer.observe(card));
4331    
4332    });
4333    
4334    // section2 animation script
4335    document.addEventListener("DOMContentLoaded", function(){
4336    
4337        const hero = document.querySelector(".hero");
4338    
4339        const observer = new IntersectionObserver(function(entries){
4340    
4341            entries.forEach(entry=>{
4342    
4343                if(entry.isIntersecting){
4344    
4345                    const eyebrow = hero.querySelector(".eyebrow");
4346                    const heading = hero.querySelector("h1");
4347                    const para = hero.querySelector("p");
4348                    const buttons = hero.querySelector(".cta");
4349                    const cards = hero.querySelectorAll(".cap");
4350                    const image = hero.querySelector(".hero-visual");
4351                    const footer = hero.querySelector(".hero-footer-wrap");
4352    
4353                    eyebrow.classList.add("animate");
4354    
4355                    setTimeout(()=>{
4356                        heading.classList.add("animate");
4357                    },200);
4358    
4359                    setTimeout(()=>{
4360                        para.classList.add("animate");
4361                    },400);
4362    
4363                    setTimeout(()=>{
4364                        buttons.classList.add("animate");
4365                    },600);
4366    
4367                    cards.forEach((card,index)=>{
4368    
4369                        setTimeout(()=>{
4370                            card.classList.add("animate");
4371                        },800 + (index*120));
4372    
4373                    });
4374    
4375                    setTimeout(()=>{
4376                        image.classList.add("animate");
4377                    },1200);
4378    
4379                    setTimeout(()=>{
4380                        footer.classList.add("animate");
4381                    },1400);
4382    
4383                }else{
4384    
4385                    hero.querySelectorAll(".animate").forEach(el=>{
4386                        el.classList.remove("animate");
4387                    });
4388    
4389                }
4390    
4391            });
4392    
4393        },{
4394            threshold:0.3
4395        });
4396    
4397        observer.observe(hero);
4398    
4399    });
4400    </script>
4400
4401    <!-- section4 animation script -->
4402     
4402<script>
4403      const platformSection =
4404    document.querySelector('.platform-section');
4405    
4406    const platformCards =
4407    document.querySelectorAll('.platform-wrap');
4408    
4409    const platformEyebrow =
4410    document.querySelector('.platform-eyebrow');
4411    
4412    const platformTitle =
4413    document.querySelector('.platform-title');
4414    
4415    const platformObserver =
4416    new IntersectionObserver(function(entries){
4417    
4418        entries.forEach(entry=>{
4419    
4420            if(entry.isIntersecting){
4421    
4422                platformEyebrow.classList.add('show');
4423    
4424                setTimeout(function(){
4425    
4426                    platformTitle.classList.add('show');
4427    
4428                },200);
4429    
4430                platformCards.forEach(function(card,index){
4431    
4432                    setTimeout(function(){
4433    
4434                        card.classList.add('show');
4435    
4436                    },500 + index*150);
4437    
4438                });
4439    
4440            }else{
4441    
4442                platformEyebrow.classList.remove('show');
4443                platformTitle.classList.remove('show');
4444    
4445                platformCards.forEach(function(card){
4446    
4447                    card.classList.remove('show');
4448    
4449                });
4450    
4451            }
4452    
4453        });
4454    
4455    },{
4456        threshold:.25
4457    });
4458    
4459    platformObserver.observe(platformSection);
4460     </script>
4460
4461     
4462     <!-- section6 script animation -->
4463      
4463<script>
4464        const sidelineSection =
4465    document.querySelector('.sideline-section');
4466    
4467    const sidelineCards =
4468    document.querySelectorAll('.sideline-card');
4469    
4470    const sidelineObserver =
4471    new IntersectionObserver(function(entries){
4472    
4473        entries.forEach(entry=>{
4474    
4475            if(entry.isIntersecting){
4476    
4477                sidelineCards.forEach(function(card,index){
4478    
4479                    setTimeout(function(){
4480    
4481                        card.classList.add('show');
4482    
4483                    },index*120);
4484    
4485                });
4486    
4487            }else{
4488    
4489                sidelineCards.forEach(function(card){
4490    
4491                    card.classList.remove('show');
4492    
4493                });
4494    
4495            }
4496    
4497        });
4498    
4499    },{
4500        threshold:.15
4501    });
4502    
4503    sidelineObserver.observe(sidelineSection);
4504      </script>
4504
4505    
4506      <!-- animation section7 -->
4507       
4507<script>
4508        
4509        const exchangeSection =
4510        document.querySelector('.exchange-section');
4511        
4512        const exchangeObserver =
4513        new IntersectionObserver(function(entries){
4514        
4515        entries.forEach(function(entry){
4516        
4517        if(entry.isIntersecting){
4518        
4519        document.querySelector('.exchange-eyebrow')
4520        .classList.add('show');
4521        
4522        setTimeout(function(){
4523        
4524        document.querySelector('.exchange-title')
4525        .classList.add('show');
4526        
4527        },200);
4528        
4529        setTimeout(function(){
4530        
4531        document.querySelector('.exchange-lead')
4532        .classList.add('show');
4533        
4534        },400);
4535        
4536        setTimeout(function(){
4537        
4538        document.querySelector('.exchange-card-left')
4539        .classList.add('show');
4540        
4541        },600);
4542        
4543        setTimeout(function(){
4544        
4545        document.querySelector('.exchange-card-right')
4546        .classList.add('show');
4547        
4548        },800);
4549        
4550        document.querySelectorAll('.exchange-item')
4551        .forEach(function(item,index){
4552        
4553        setTimeout(function(){
4554        
4555        item.classList.add('show');
4556        
4557        },1000 + (index*80));
4558        
4559        });
4560        
4561        setTimeout(function(){
4562        
4563        document.querySelector('.exchange-footer-text')
4564        .classList.add('show');
4565        
4566        },1700);
4567        
4568        }else{
4569        
4570        document.querySelectorAll(
4571        '.exchange-eyebrow,.exchange-title,.exchange-lead,.exchange-footer-text,.exchange-card,.exchange-item'
4572        ).forEach(function(el){
4573        
4574        el.classList.remove('show');
4575        
4576        });
4577        
4578        }
4579        
4580        });
4581        
4582        },{
4583        threshold:.25
4584        });
4585        
4586        exchangeObserver.observe(exchangeSection);
4587    
4588       </script>
4588
4589       <!-- section8 and 9 animation script -->
4590        
4590<script>
4591            /* ================= CAMERA SECTION ================= */
4592    
4593    const cameraSection =
4594    document.querySelector('.camera-section');
4595    
4596    const cameraObserver =
4597    new IntersectionObserver(function(entries){
4598    
4599    entries.forEach(function(entry){
4600    
4601    if(entry.isIntersecting){
4602    
4603    document.querySelector('.camera-title')
4604    .classList.add('show');
4605    
4606    document
4607    .querySelectorAll('.camera-card')
4608    .forEach(function(card,index){
4609    
4610    setTimeout(function(){
4611    
4612    card.classList.add('show');
4613    
4614    },300+(index*180));
4615    
4616    });
4617    
4618    }else{
4619    
4620    document.querySelector('.camera-title')
4621    .classList.remove('show');
4622    
4623    document
4624    .querySelectorAll('.camera-card')
4625    .forEach(function(card){
4626    
4627    card.classList.remove('show');
4628    
4629    });
4630    
4631    }
4632    
4633    });
4634    
4635    },{
4636    threshold:.3
4637    });
4638    
4639    cameraObserver.observe(cameraSection);
4640    
4641    
4642    
4643    /* ================= FEATURE SECTION ================= */
4644    
4645    const featureSection =
4646    document.querySelector('.feature-section');
4647    
4648    const featureObserver =
4649    new IntersectionObserver(function(entries){
4650    
4651    entries.forEach(function(entry){
4652    
4653    if(entry.isIntersecting){
4654    
4655    document
4656    .querySelectorAll('.feature-card')
4657    .forEach(function(card,index){
4658    
4659    setTimeout(function(){
4660    
4661    card.classList.add('show');
4662    
4663    },index*250);
4664    
4665    });
4666    
4667    }else{
4668    
4669    document
4670    .querySelectorAll('.feature-card')
4671    .forEach(function(card){
4672    
4673    card.classList.remove('show');
4674    
4675    });
4676    
4677    }
4678    
4679    });
4680    
4681    },{
4682    threshold:.3
4683    });
4684    
4685    featureObserver.observe(featureSection);
4686    </script>
4686
4687    
4688    

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.