{"id":10,"date":"2026-06-19T14:03:52","date_gmt":"2026-06-19T14:03:52","guid":{"rendered":"https:\/\/www.connectnsecure.com\/home\/"},"modified":"2026-07-01T12:58:23","modified_gmt":"2026-07-01T12:58:23","slug":"home","status":"publish","type":"page","link":"https:\/\/uniresources.in\/uspl\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Premium Enterprise IT Hero Slider - Uniotech<\/title>\r\n \r\n <!-- FontAwesome 6 for modern icons -->\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n \r\n <!-- Google Fonts: Outfit for tech headers, Plus Jakarta Sans for clean body text -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* CSS Variables & Premium Color System *\/\r\n :root {\r\n --primary-orange: #f37021;\r\n --primary-orange-rgb: 243, 112, 33;\r\n --orange-gradient: linear-gradient(135deg, #ff7d32 0%, #e05307 100%);\r\n --accent-blue: #3b82f6;\r\n --accent-indigo: #6366f1;\r\n --bg-cyber: #050811;\r\n --text-light: #f8fafc;\r\n --text-muted: #64748b;\r\n --glass-bg: rgba(10, 16, 32, 0.6);\r\n --glass-border: rgba(255, 255, 255, 0.08);\r\n --transition-bezier: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);\r\n }\r\n\r\n \/* Scoped container to prevent theme leaks *\/\r\n .unio-slider-container,\r\n .unio-slider-container * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Plus Jakarta Sans', sans-serif;\r\n }\r\n\r\n body {\r\n overflow-x: hidden;\r\n background-color: var(--bg-cyber);\r\n }\r\n\r\n \/* --- Slider Wrapper Container --- *\/\r\n .unio-slider-container {\r\n position: relative;\r\n width: 100vw;\r\n height: 90vh;\r\n min-height: 580px; \/* Reverted to 580px to ensure the entire slider fits within standard screen heights *\/\r\n overflow: hidden;\r\n background-color: var(--bg-cyber);\r\n color: var(--text-light);\r\n }\r\n\r\n \/* Premium Cyber-grid and ambient lights background *\/\r\n .unio-bg-decorator {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n z-index: 2;\r\n pointer-events: none;\r\n background-image: \r\n radial-gradient(circle at 15% 15%, rgba(99, 102, 241, 0.15) 0%, transparent 40%),\r\n radial-gradient(circle at 85% 75%, rgba(243, 112, 33, 0.1) 0%, transparent 45%);\r\n }\r\n\r\n .unio-cyber-grid {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-image: linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),\r\n linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);\r\n background-size: 60px 60px;\r\n mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%);\r\n -webkit-mask-image: radial-gradient(circle at 50% 50%, black, transparent 75%);\r\n z-index: 2;\r\n pointer-events: none;\r\n opacity: 0.65;\r\n }\r\n\r\n \/* --- Slide Item --- *\/\r\n .unio-slide {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n opacity: 0;\r\n visibility: hidden;\r\n z-index: 1;\r\n display: flex;\r\n align-items: center;\r\n transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), visibility 1s;\r\n }\r\n\r\n .unio-slide.active {\r\n opacity: 1;\r\n visibility: visible;\r\n z-index: 3;\r\n }\r\n\r\n \/* Zoom Transition for Background Images (Ken Burns 2.0) *\/\r\n .unio-slide-bg {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-size: cover;\r\n background-position: center;\r\n transform: scale(1.05);\r\n transition: transform 9s cubic-bezier(0.16, 1, 0.3, 1);\r\n z-index: 1;\r\n }\r\n\r\n .unio-slide.active .unio-slide-bg {\r\n transform: scale(1.12);\r\n }\r\n\r\n \/* Double Depth Gradient Overlay for visual hierarchy *\/\r\n .unio-slide-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: \r\n linear-gradient(to right, rgba(5, 8, 17, 0.7) 0%, rgba(5, 8, 17, 0.35) 45%, rgba(5, 8, 17, 0.05) 100%),\r\n linear-gradient(to top, rgba(5, 8, 17, 0.6) 0%, rgba(5, 8, 17, 0.05) 50%, rgba(5, 8, 17, 0.25) 100%);\r\n z-index: 2;\r\n }\r\n\r\n \/* --- Slide Layout Grid --- *\/\r\n .unio-slide-content {\r\n position: relative;\r\n z-index: 10;\r\n max-width: 1400px;\r\n width: 100%;\r\n margin: 0 auto;\r\n padding: 100px 100px 120px 100px; \/* Top padding 100px to position text close below the navbar *\/\r\n height: 100%;\r\n display: flex;\r\n align-items: flex-start; \/* Aligned to top to maintain consistent gap from navbar *\/\r\n }\r\n\r\n .unio-slide-grid {\r\n display: grid;\r\n grid-template-columns: 1.2fr 0.8fr;\r\n gap: 80px;\r\n align-items: center;\r\n width: 100%;\r\n }\r\n\r\n \/* --- Text Styling & Keyframes Stagger --- *\/\r\n .unio-text-block {\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n \/* Glassmorphic Badge *\/\r\n .unio-tagline {\r\n align-self: flex-start;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: rgba(243, 112, 33, 0.08);\r\n border: 1px solid rgba(243, 112, 33, 0.25);\r\n color: #ffd8a8;\r\n padding: 6px 14px;\r\n font-size: 12px;\r\n font-weight: 700;\r\n letter-spacing: 2.5px;\r\n text-transform: uppercase;\r\n border-radius: 50px;\r\n margin-bottom: 24px;\r\n opacity: 0;\r\n transform: translateY(25px);\r\n transition: var(--transition-bezier);\r\n }\r\n\r\n .unio-tagline i {\r\n color: var(--primary-orange);\r\n font-size: 11px;\r\n }\r\n\r\n \/* Heading 1 using Outfit Font *\/\r\n .unio-slide-title {\r\n font-family: 'Outfit', sans-serif;\r\n font-size: 46px; \/* Reduced to 46px for an elegant visual scale that fits smaller viewports without overflowing *\/\r\n font-weight: 800;\r\n line-height: 1.12;\r\n margin-bottom: 16px;\r\n color: #ffffff;\r\n letter-spacing: -1.5px;\r\n opacity: 0;\r\n transform: translateY(25px);\r\n transition: var(--transition-bezier);\r\n text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);\r\n }\r\n\r\n .unio-slide-title span {\r\n background: var(--orange-gradient);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n display: inline-block;\r\n text-shadow: none;\r\n filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));\r\n }\r\n\r\n \/* Description *\/\r\n .unio-slide-desc {\r\n font-size: 15px; \/* Set to 15px for readability and compact vertical spacing *\/\r\n color: #e2e8f0;\r\n max-width: 620px;\r\n line-height: 1.5;\r\n margin-bottom: 24px;\r\n opacity: 0;\r\n transform: translateY(25px);\r\n transition: var(--transition-bezier);\r\n text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);\r\n }\r\n\r\n \/* Buttons block *\/\r\n .unio-btn-group {\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n opacity: 0;\r\n transform: translateY(25px);\r\n transition: var(--transition-bezier);\r\n }\r\n\r\n .unio-slide-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n background: var(--orange-gradient);\r\n color: #ffffff !important;\r\n padding: 16px 36px;\r\n font-size: 15px;\r\n font-weight: 700;\r\n border-radius: 12px;\r\n text-decoration: none;\r\n transition: var(--transition-bezier);\r\n box-shadow: 0 10px 25px rgba(243, 112, 33, 0.35);\r\n border: 1px solid rgba(255, 255, 255, 0.1);\r\n }\r\n\r\n .unio-slide-btn i {\r\n font-size: 13px;\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .unio-slide-btn:hover {\r\n transform: translateY(-4px);\r\n box-shadow: 0 15px 35px rgba(243, 112, 33, 0.5);\r\n }\r\n\r\n .unio-slide-btn:hover i {\r\n transform: translateX(5px);\r\n }\r\n\r\n .unio-slide-btn-outline {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 12px;\r\n background: rgba(255, 255, 255, 0.03);\r\n color: #ffffff !important;\r\n padding: 16px 32px;\r\n font-size: 15px;\r\n font-weight: 700;\r\n border-radius: 12px;\r\n text-decoration: none;\r\n transition: var(--transition-bezier);\r\n border: 1px solid var(--glass-border);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .unio-slide-btn-outline:hover {\r\n background: rgba(255, 255, 255, 0.08);\r\n border-color: rgba(255, 255, 255, 0.25);\r\n transform: translateY(-4px);\r\n }\r\n\r\n \/* Active Content Anim Stagger *\/\r\n .unio-slide.active .unio-tagline { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }\r\n .unio-slide.active .unio-slide-title { opacity: 1; transform: translateY(0); transition-delay: 0.35s; }\r\n .unio-slide.active .unio-slide-desc { opacity: 1; transform: translateY(0); transition-delay: 0.5s; }\r\n .unio-slide.active .unio-btn-group { opacity: 1; transform: translateY(0); transition-delay: 0.65s; }\r\n\r\n \/* --- Visual Showcase Area (Right Side of Grid) --- *\/\r\n .unio-visual-showcase {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: relative;\r\n opacity: 0;\r\n transform: scale(0.9) translateX(50px);\r\n transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;\r\n }\r\n\r\n .unio-slide.active .unio-visual-showcase {\r\n opacity: 1;\r\n transform: scale(1) translateX(0);\r\n }\r\n\r\n \/* 1. Glass Statistics Card (Slide 1) *\/\r\n .unio-stat-board {\r\n background: var(--glass-bg);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 24px;\r\n padding: 35px;\r\n width: 100%;\r\n max-width: 420px;\r\n backdrop-filter: blur(20px);\r\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 25px;\r\n }\r\n\r\n .unio-stat-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n padding-bottom: 20px;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .unio-stat-item:last-child {\r\n border-bottom: none;\r\n padding-bottom: 0;\r\n }\r\n\r\n .unio-stat-icon {\r\n width: 52px;\r\n height: 52px;\r\n border-radius: 14px;\r\n background: rgba(99, 102, 241, 0.12);\r\n border: 1px solid rgba(99, 102, 241, 0.25);\r\n color: #818cf8;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 20px;\r\n }\r\n\r\n .unio-stat-num {\r\n font-family: 'Outfit', sans-serif;\r\n font-size: 28px;\r\n font-weight: 800;\r\n color: #ffffff;\r\n line-height: 1;\r\n margin-bottom: 4px;\r\n }\r\n\r\n .unio-stat-lbl {\r\n font-size: 13px;\r\n color: var(--text-muted);\r\n font-weight: 600;\r\n }\r\n\r\n \/* 2. Interactive Mockup Terminal Dashboard (Slide 2) *\/\r\n .unio-mock-server {\r\n background: #090e1a;\r\n border: 1px solid var(--glass-border);\r\n border-radius: 16px;\r\n width: 100%;\r\n max-width: 440px;\r\n overflow: hidden;\r\n box-shadow: 0 30px 70px rgba(0,0,0,0.6);\r\n }\r\n\r\n .unio-mock-header {\r\n background: rgba(255,255,255,0.03);\r\n padding: 12px 20px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-bottom: 1px solid rgba(255, 255, 255, 0.05);\r\n }\r\n\r\n .unio-mock-dots {\r\n display: flex;\r\n gap: 6px;\r\n }\r\n\r\n .unio-mock-dot {\r\n width: 10px;\r\n height: 10px;\r\n border-radius: 50%;\r\n }\r\n\r\n .unio-mock-dot.red { background: #ef4444; }\r\n .unio-mock-dot.yellow { background: #eab308; }\r\n .unio-mock-dot.green { background: #22c55e; }\r\n\r\n .unio-mock-title {\r\n font-size: 11px;\r\n color: var(--text-muted);\r\n font-weight: 700;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .unio-mock-body {\r\n padding: 24px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n }\r\n\r\n .unio-mock-row {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n font-size: 13px;\r\n }\r\n\r\n .unio-mock-label {\r\n color: #94a3b8;\r\n }\r\n\r\n .unio-mock-value {\r\n font-family: monospace;\r\n color: #22c55e;\r\n font-weight: 700;\r\n }\r\n\r\n .unio-mock-ping {\r\n display: inline-block;\r\n width: 8px;\r\n height: 8px;\r\n background: #22c55e;\r\n border-radius: 50%;\r\n margin-right: 6px;\r\n box-shadow: 0 0 10px #22c55e;\r\n }\r\n\r\n .unio-mock-chart {\r\n height: 60px;\r\n background: linear-gradient(180deg, rgba(34, 197, 94, 0.1) 0%, transparent 100%);\r\n border-bottom: 2px solid #22c55e;\r\n border-radius: 4px;\r\n position: relative;\r\n overflow: hidden;\r\n margin-top: 10px;\r\n }\r\n\r\n \/* Wave effect inside mockup chart *\/\r\n .unio-mock-chart::after {\r\n content: '';\r\n position: absolute;\r\n width: 200%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);\r\n animation: waveMove 3s infinite linear;\r\n }\r\n\r\n @keyframes waveMove {\r\n 0% { transform: translateX(-100%); }\r\n 100% { transform: translateX(50%); }\r\n }\r\n\r\n \/* 3. Simulated Tech Support Chat (Slide 3) *\/\r\n .unio-support-chat {\r\n background: var(--glass-bg);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 20px;\r\n padding: 24px;\r\n width: 100%;\r\n max-width: 400px;\r\n backdrop-filter: blur(20px);\r\n box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n }\r\n\r\n .unio-chat-bubble {\r\n max-width: 85%;\r\n padding: 12px 18px;\r\n border-radius: 16px;\r\n font-size: 13.5px;\r\n line-height: 1.4;\r\n }\r\n\r\n .unio-chat-bubble.client {\r\n background: rgba(255, 255, 255, 0.05);\r\n color: #e2e8f0;\r\n align-self: flex-start;\r\n border-bottom-left-radius: 4px;\r\n }\r\n\r\n .unio-chat-bubble.engineer {\r\n background: rgba(243, 112, 33, 0.12);\r\n border: 1px solid rgba(243, 112, 33, 0.2);\r\n color: #ffe8d6;\r\n align-self: flex-end;\r\n border-bottom-right-radius: 4px;\r\n }\r\n\r\n .unio-chat-status {\r\n font-size: 11px;\r\n color: var(--text-muted);\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n margin-top: 5px;\r\n }\r\n\r\n .unio-chat-status span {\r\n display: inline-block;\r\n width: 6px;\r\n height: 6px;\r\n background: #3b82f6;\r\n border-radius: 50%;\r\n animation: pulse 1.5s infinite;\r\n }\r\n\r\n @keyframes pulse {\r\n 0% { transform: scale(1); opacity: 0.5; }\r\n 50% { transform: scale(1.4); opacity: 1; }\r\n 100% { transform: scale(1); opacity: 0.5; }\r\n }\r\n\r\n \/* 4. Flyer frame device mockup (Slide 4) *\/\r\n .unio-flyer-mockup {\r\n position: relative;\r\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);\r\n border: 1px solid var(--glass-border);\r\n border-radius: 24px;\r\n padding: 14px;\r\n width: 100%;\r\n max-width: 440px;\r\n box-shadow: \r\n 0 40px 80px rgba(0, 0, 0, 0.8),\r\n 0 0 40px rgba(243, 112, 33, 0.1);\r\n transition: var(--transition-bezier);\r\n }\r\n\r\n .unio-flyer-mockup:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n border-color: rgba(243, 112, 33, 0.3);\r\n box-shadow: \r\n 0 50px 100px rgba(0, 0, 0, 0.9),\r\n 0 0 60px rgba(243, 112, 33, 0.25);\r\n }\r\n\r\n .unio-flyer-img {\r\n width: 100%;\r\n height: auto;\r\n border-radius: 14px;\r\n display: block;\r\n object-fit: cover;\r\n }\r\n\r\n .unio-flyer-tag {\r\n position: absolute;\r\n top: -12px;\r\n right: 30px;\r\n background: var(--orange-gradient);\r\n color: #ffffff;\r\n font-size: 11px;\r\n font-weight: 800;\r\n padding: 6px 18px;\r\n border-radius: 50px;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n box-shadow: 0 4px 15px rgba(243, 112, 33, 0.4);\r\n z-index: 5;\r\n }\r\n\r\n \/* --- Custom Horizontal Dashboard Navigation Tabs (Vercel Style) --- *\/\r\n .unio-slider-footer {\r\n position: absolute;\r\n bottom: 30px; \/* Positioned closer to bottom to ensure visibility on short viewports *\/\r\n left: 50%;\r\n transform: translateX(-50%);\r\n z-index: 20;\r\n width: 100%;\r\n max-width: 1400px;\r\n padding: 0 100px;\r\n }\r\n\r\n .unio-tabs-nav {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 25px;\r\n width: 100%;\r\n border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n padding-top: 30px;\r\n }\r\n\r\n .unio-tab-item {\r\n cursor: pointer;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n text-align: left;\r\n transition: var(--transition-bezier);\r\n opacity: 0.4;\r\n position: relative;\r\n }\r\n\r\n .unio-tab-item:hover {\r\n opacity: 0.85;\r\n }\r\n\r\n .unio-tab-item.active {\r\n opacity: 1;\r\n }\r\n\r\n .unio-tab-num {\r\n font-family: 'Outfit', sans-serif;\r\n font-size: 12px;\r\n font-weight: 800;\r\n color: var(--primary-orange);\r\n letter-spacing: 1px;\r\n }\r\n\r\n .unio-tab-title {\r\n font-size: 14px;\r\n font-weight: 700;\r\n color: #ffffff;\r\n letter-spacing: -0.2px;\r\n }\r\n\r\n \/* Active Tab progress bar track *\/\r\n .unio-tab-progress-bg {\r\n width: 100%;\r\n height: 3px;\r\n background: rgba(255, 255, 255, 0.05);\r\n border-radius: 4px;\r\n overflow: hidden;\r\n margin-top: 5px;\r\n }\r\n\r\n .unio-tab-progress-fill {\r\n width: 0%;\r\n height: 100%;\r\n background: var(--orange-gradient);\r\n border-radius: 4px;\r\n transition: width 0.1s linear;\r\n }\r\n\r\n \/* --- Left \/ Right Navigation Arrows (Magnetic effect) --- *\/\r\n .unio-arrow-nav {\r\n position: absolute;\r\n top: 45%;\r\n transform: translateY(-50%);\r\n width: 54px;\r\n height: 54px;\r\n border-radius: 50%;\r\n background: rgba(255, 255, 255, 0.02);\r\n border: 1px solid var(--glass-border);\r\n color: #ffffff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n z-index: 50;\r\n font-size: 16px;\r\n transition: var(--transition-bezier);\r\n backdrop-filter: blur(10px);\r\n }\r\n\r\n .unio-arrow-nav:hover {\r\n background: var(--orange-gradient);\r\n border-color: var(--primary-orange);\r\n box-shadow: 0 0 25px rgba(243, 112, 33, 0.4);\r\n transform: translateY(-50%) scale(1.08);\r\n }\r\n\r\n .unio-arrow-nav.prev { left: 35px; }\r\n .unio-arrow-nav.next { right: 35px; }\r\n\r\n .unio-arrow-nav i {\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .unio-arrow-nav.prev:hover i { transform: translateX(-3px); }\r\n .unio-arrow-nav.next:hover i { transform: translateX(3px); }\r\n\r\n \/* Bottom subtle line bar overlay *\/\r\n .unio-bottom-glow {\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 1px;\r\n background: linear-gradient(90deg, transparent, rgba(243, 112, 33, 0.4), transparent);\r\n }\r\n\r\n \/* --- Responsive Styling --- *\/\r\n @media (max-width: 1200px) {\r\n .unio-slide-content { padding: 100px 70px 120px 70px; }\r\n .unio-slider-footer { padding: 0 70px; }\r\n .unio-slide-title { font-size: 40px; }\r\n .unio-arrow-nav.prev { left: 20px; }\r\n .unio-arrow-nav.next { right: 20px; }\r\n }\r\n\r\n @media (max-width: 992px) {\r\n .unio-slide-grid {\r\n grid-template-columns: 1fr;\r\n gap: 40px;\r\n }\r\n .unio-visual-showcase {\r\n justify-content: flex-start;\r\n transform: scale(0.95) translateY(20px);\r\n margin-top: -10px;\r\n }\r\n .unio-slide-desc {\r\n margin-bottom: 25px;\r\n }\r\n .unio-tabs-nav {\r\n gap: 15px;\r\n }\r\n .unio-tab-title {\r\n font-size: 12px;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .unio-slider-container {\r\n height: 100vh;\r\n min-height: 600px;\r\n }\r\n .unio-slide-content {\r\n padding: 80px 24px 130px 24px;\r\n }\r\n .unio-slide-grid {\r\n grid-template-columns: 1fr;\r\n gap: 0;\r\n }\r\n .unio-arrow-nav {\r\n display: none; \/* Hide arrows on touch devices *\/\r\n }\r\n .unio-slide-title {\r\n font-size: 32px;\r\n margin-bottom: 16px;\r\n }\r\n .unio-slide-desc {\r\n font-size: 14px;\r\n line-height: 1.5;\r\n margin-bottom: 30px;\r\n }\r\n .unio-btn-group {\r\n flex-direction: column;\r\n align-items: stretch;\r\n gap: 12px;\r\n }\r\n .unio-slide-btn, .unio-slide-btn-outline {\r\n justify-content: center;\r\n padding: 12px 24px;\r\n font-size: 14px;\r\n }\r\n .unio-slider-footer {\r\n position: absolute;\r\n bottom: 30px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 100%;\r\n padding: 0 24px;\r\n z-index: 20;\r\n }\r\n .unio-tabs-nav {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 12px;\r\n padding-top: 15px;\r\n }\r\n .unio-tab-item {\r\n opacity: 0.6;\r\n gap: 4px;\r\n }\r\n .unio-tab-title {\r\n font-size: 12px;\r\n }\r\n .unio-tab-num {\r\n font-size: 10px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .unio-slide-title {\r\n font-size: 28px;\r\n }\r\n .unio-tabs-nav {\r\n grid-template-columns: repeat(2, 1fr);\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- Main Hero Slider Container -->\r\n <div class=\"unio-slider-container\" id=\"unioAmcSlider\">\r\n \r\n <!-- Dynamic Ambient Grid Overlay -->\r\n <div class=\"unio-cyber-grid\"><\/div>\r\n <div class=\"unio-bg-decorator\"><\/div>\r\n\r\n <!-- Slide 1: Hardware AMC -->\r\n <div class=\"unio-slide active\">\r\n <div class=\"unio-slide-bg\" style=\"background-image: url('https:\/\/uniresources.in\/uspl\/wp-content\/uploads\/2026\/07\/Background.jpg');\"><\/div>\r\n <div class=\"unio-slide-overlay\"><\/div>\r\n \r\n <div class=\"unio-slide-content\">\r\n <div class=\"unio-slide-grid\">\r\n <!-- Text column -->\r\n <div class=\"unio-text-block\">\r\n <div class=\"unio-tagline\"><i class=\"fa-solid fa-microchip\"><\/i> Corporate IT Support<\/div>\r\n <h1 class=\"unio-slide-title\">Comprehensive <span>Hardware AMC<\/span> Solutions<\/h1>\r\n <p class=\"unio-slide-desc\">Keep your business operations running flawlessly. We provide unlimited doorstep engineer visits and proactive maintenance for all your enterprise desktops, workstations, and laptops.<\/p>\r\n <div class=\"unio-btn-group\">\r\n <a href=\"https:\/\/uniresources.in\/uspl\/plan\/\" class=\"unio-slide-btn\">View AMC Plans <i class=\"fas fa-chevron-right\"><\/i><\/a>\r\n <a href=\"https:\/\/uniresources.in\/uspl\/contact-us\/\" class=\"unio-slide-btn-outline\">Watch Service Demo<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Slide 2: Server & Network -->\r\n <div class=\"unio-slide\">\r\n <div class=\"unio-slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1558494949-ef010cbdcc31?q=80&w=1920&auto=format&fit=crop');\"><\/div>\r\n <div class=\"unio-slide-overlay\"><\/div>\r\n \r\n <div class=\"unio-slide-content\">\r\n <div class=\"unio-slide-grid\">\r\n <!-- Text Column -->\r\n <div class=\"unio-text-block\">\r\n <div class=\"unio-tagline\"><i class=\"fa-solid fa-server\"><\/i> Zero Downtime Guarantee<\/div>\r\n <h1 class=\"unio-slide-title\">Enterprise <span>Server & Network<\/span> Management<\/h1>\r\n <p class=\"unio-slide-desc\">Secure your core infrastructure with our 24\/7 proactive monitoring. We manage rack servers, firewalls, and data backups so you can focus entirely on business growth.<\/p>\r\n <div class=\"unio-btn-group\">\r\n <a href=\"https:\/\/uniresources.in\/uspl\/contact-us\/\" class=\"unio-slide-btn\">Consult an Expert <i class=\"fas fa-chevron-right\"><\/i><\/a>\r\n <a href=\"https:\/\/uniresources.in\/uspl\/plan\/\" class=\"unio-slide-btn-outline\">Our Stack Details<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Slide 3: Remote IT Support -->\r\n <div class=\"unio-slide\">\r\n <div class=\"unio-slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1581091226825-a6a2a5aee158?q=80&w=1920&auto=format&fit=crop');\"><\/div>\r\n <div class=\"unio-slide-overlay\"><\/div>\r\n \r\n <div class=\"unio-slide-content\">\r\n <div class=\"unio-slide-grid\">\r\n <!-- Text Column -->\r\n <div class=\"unio-text-block\">\r\n <div class=\"unio-tagline\"><i class=\"fa-solid fa-bolt\"><\/i> Instant Resolution<\/div>\r\n <h1 class=\"unio-slide-title\">Lightning Fast <span>Remote IT<\/span> Support<\/h1>\r\n <p class=\"unio-slide-desc\">Software issues slowing your workstations down? Our dedicated tech team resolves OS, email configuration, domain, and application errors instantly via secure remote software.<\/p>\r\n <div class=\"unio-btn-group\">\r\n <a href=\"https:\/\/uniresources.in\/uspl\/contact-us\/\" class=\"unio-slide-btn\">Get Free Quote <i class=\"fas fa-chevron-right\"><\/i><\/a>\r\n <a href=\"https:\/\/uniresources.in\/uspl\/contact-us\/\" class=\"unio-slide-btn-outline\">Explore Live Helpdesk<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Slide 4: Custom Flyer Presentation -->\r\n <div class=\"unio-slide\">\r\n<div class=\"unio-slide-bg\" style=\"background-image: url('https:\/\/uniresources.in\/uspl\/wp-content\/uploads\/2026\/06\/Screenshot-2026-06-30-115337.png');\"><\/div>\r\n <div class=\"unio-slide-overlay\"><\/div>\r\n \r\n <div class=\"unio-slide-content\">\r\n <div class=\"unio-slide-grid\">\r\n <!-- Text Column -->\r\n <div class=\"unio-text-block\">\r\n <div class=\"unio-tagline\"><i class=\"fa-solid fa-gift\"><\/i> Exclusive Free Offer<\/div>\r\n <h1 class=\"unio-slide-title\">Get a Free <span>Infrastructure Audit<\/span><\/h1>\r\n <p class=\"unio-slide-desc\">Ensure your IT systems are fully optimized. We evaluate your network security, server health, and hardware age, identifying critical vulnerabilities before they cause costly business downtime.<\/p>\r\n <div class=\"unio-btn-group\">\r\n <a href=\"https:\/\/uniresources.in\/uspl\/contact-us\/\" class=\"unio-slide-btn\">Claim Free Audit <i class=\"fas fa-chevron-right\"><\/i><\/a>\r\n <a href=\"https:\/\/uniresources.in\/uspl\/contact-us\/\" class=\"unio-slide-btn-outline\">Audit Scope Details<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Left\/Right Arrow Navigation -->\r\n <div class=\"unio-arrow-nav prev\" onclick=\"handlePrevSlide()\"><i class=\"fa-solid fa-chevron-left\"><\/i><\/div>\r\n <div class=\"unio-arrow-nav next\" onclick=\"handleNextSlide()\"><i class=\"fa-solid fa-chevron-right\"><\/i><\/div>\r\n\r\n <!-- Footer Area: Dashboard Navigation Tabs -->\r\n <div class=\"unio-slider-footer\">\r\n <div class=\"unio-tabs-nav\">\r\n <!-- Tab 1 -->\r\n <div class=\"unio-tab-item active\" onclick=\"goToSlide(0)\">\r\n <span class=\"unio-tab-num\">01. SERVICES<\/span>\r\n <span class=\"unio-tab-title\">Hardware AMC<\/span>\r\n <div class=\"unio-tab-progress-bg\">\r\n <div class=\"unio-tab-progress-fill\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Tab 2 -->\r\n <div class=\"unio-tab-item\" onclick=\"goToSlide(1)\">\r\n <span class=\"unio-tab-num\">02. NETWORKS<\/span>\r\n <span class=\"unio-tab-title\">Servers & Firewalls<\/span>\r\n <div class=\"unio-tab-progress-bg\">\r\n <div class=\"unio-tab-progress-fill\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Tab 3 -->\r\n <div class=\"unio-tab-item\" onclick=\"goToSlide(2)\">\r\n <span class=\"unio-tab-num\">03. HELPDESK<\/span>\r\n <span class=\"unio-tab-title\">Remote IT Support<\/span>\r\n <div class=\"unio-tab-progress-bg\">\r\n <div class=\"unio-tab-progress-fill\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Tab 4 -->\r\n <div class=\"unio-tab-item\" onclick=\"goToSlide(3)\">\r\n <span class=\"unio-tab-num\">04. CAMPAIGN<\/span>\r\n <span class=\"unio-tab-title\">Free IT Audit<\/span>\r\n <div class=\"unio-tab-progress-bg\">\r\n <div class=\"unio-tab-progress-fill\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Bottom border glow decorator -->\r\n <div class=\"unio-bottom-glow\"><\/div>\r\n\r\n <\/div>\r\n\r\n <script>\r\n let currentSlide = 0;\r\n const slides = document.querySelectorAll('.unio-slide');\r\n const tabs = document.querySelectorAll('.unio-tab-item');\r\n const progressFills = document.querySelectorAll('.unio-tab-progress-fill');\r\n \r\n const slideDuration = 6000; \/\/ 6 seconds per slide\r\n let startTimestamp = null;\r\n let animationFrameId = null;\r\n let paused = false;\r\n\r\n \/\/ Initialize layout\r\n function initSlider() {\r\n slides.forEach((slide, idx) => {\r\n if (idx === currentSlide) {\r\n slide.classList.add('active');\r\n tabs[idx].classList.add('active');\r\n } else {\r\n slide.classList.remove('active');\r\n tabs[idx].classList.remove('active');\r\n }\r\n });\r\n resetProgress();\r\n }\r\n\r\n \/\/ Timeline Loop\r\n function animateTimeline(timestamp) {\r\n if (!startTimestamp) startTimestamp = timestamp;\r\n \r\n if (!paused) {\r\n const elapsed = timestamp - startTimestamp;\r\n const progress = Math.min((elapsed \/ slideDuration) * 100, 100);\r\n \r\n \/\/ Update active tab progress fill\r\n const activeFill = progressFills[currentSlide];\r\n if (activeFill) {\r\n activeFill.style.width = `${progress}%`;\r\n }\r\n\r\n if (elapsed >= slideDuration) {\r\n nextSlide();\r\n return;\r\n }\r\n } else {\r\n const activeFill = progressFills[currentSlide];\r\n const currentWidth = activeFill ? parseFloat(activeFill.style.width) : 0;\r\n startTimestamp = timestamp - (currentWidth \/ 100 * slideDuration);\r\n }\r\n \r\n animationFrameId = requestAnimationFrame(animateTimeline);\r\n }\r\n\r\n function startProgress() {\r\n cancelAnimationFrame(animationFrameId);\r\n startTimestamp = null;\r\n animationFrameId = requestAnimationFrame(animateTimeline);\r\n }\r\n\r\n function resetProgress() {\r\n progressFills.forEach(fill => fill.style.width = '0%');\r\n startProgress();\r\n }\r\n\r\n function nextSlide() {\r\n currentSlide = (currentSlide + 1) % slides.length;\r\n initSlider();\r\n }\r\n\r\n function prevSlide() {\r\n currentSlide = (currentSlide - 1 + slides.length) % slides.length;\r\n initSlider();\r\n }\r\n\r\n function handleNextSlide() {\r\n nextSlide();\r\n }\r\n\r\n function handlePrevSlide() {\r\n prevSlide();\r\n }\r\n\r\n function goToSlide(index) {\r\n currentSlide = index;\r\n initSlider();\r\n }\r\n\r\n \/\/ Hover state behaviors\r\n const sliderContainer = document.getElementById('unioAmcSlider');\r\n sliderContainer.addEventListener('mouseenter', () => {\r\n paused = true;\r\n });\r\n\r\n sliderContainer.addEventListener('mouseleave', () => {\r\n paused = false;\r\n startTimestamp = null;\r\n });\r\n\r\n \/\/ Touch gesture swipe support\r\n let touchStartX = 0;\r\n let touchEndX = 0;\r\n\r\n sliderContainer.addEventListener('touchstart', e => {\r\n touchStartX = e.changedTouches[0].screenX;\r\n }, {passive: true});\r\n\r\n sliderContainer.addEventListener('touchend', e => {\r\n touchEndX = e.changedTouches[0].screenX;\r\n handleSwipeGesture();\r\n }, {passive: true});\r\n\r\n function handleSwipeGesture() {\r\n const threshold = 50;\r\n if (touchStartX - touchEndX > threshold) {\r\n nextSlide();\r\n } else if (touchEndX - touchStartX > threshold) {\r\n prevSlide();\r\n }\r\n }\r\n\r\n \/\/ Keyboard Arrow Controls\r\n document.addEventListener('keydown', e => {\r\n if (e.key === 'ArrowRight') {\r\n nextSlide();\r\n } else if (e.key === 'ArrowLeft') {\r\n prevSlide();\r\n }\r\n });\r\n\r\n document.addEventListener('DOMContentLoaded', () => {\r\n initSlider();\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-6f44afa e-con e-atomic-element e-flexbox-base e-8877b26 \" data-id=\"6f44afa\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"6f44afa\">\n \t\t<div class=\"elementor-element elementor-element-9c8c477 elementor-widget elementor-widget-html\" data-id=\"9c8c477\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;800;900&display=swap');\r\n\r\n .unio-counter-wrapper {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #0f172a; \r\n position: relative;\r\n padding: 15px 0; \/* Padding aur kam kar di (35px se 15px) *\/\r\n border-top: 1px solid rgba(255, 255, 255, 0.05);\r\n overflow: hidden;\r\n }\r\n\r\n .unio-counter-wrapper::before {\r\n content: '';\r\n position: absolute;\r\n bottom: -50%;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80%;\r\n height: 100px;\r\n background: rgba(243, 112, 33, 0.2); \r\n filter: blur(80px);\r\n z-index: 1;\r\n }\r\n\r\n .unio-counter-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 0 25px;\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 15px; \r\n position: relative;\r\n z-index: 2;\r\n }\r\n\r\n .unio-counter-box {\r\n text-align: center;\r\n padding: 5px; \/* Box ki internal padding kam ki *\/\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .unio-counter-box:hover {\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* Icon Styling *\/\r\n .unio-counter-icon {\r\n font-size: 24px; \/* Icon thoda chhota kiya *\/\r\n color: #f37021; \r\n margin-bottom: 4px; \/* Icon aur number ke beech ka gap kam kiya *\/\r\n }\r\n\r\n \/* The Number *\/\r\n .unio-counter-number-wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 34px; \/* Font size slightly reduced *\/\r\n font-weight: 900;\r\n color: #ffffff;\r\n line-height: 1;\r\n margin-bottom: 2px; \/* Text aur number ke beech ka gap kam kiya *\/\r\n letter-spacing: -1px;\r\n }\r\n\r\n .unio-counter-plus {\r\n color: #f37021; \r\n margin-left: 2px;\r\n }\r\n\r\n \/* Text Label *\/\r\n .unio-counter-label {\r\n font-size: 12px;\r\n font-weight: 600;\r\n color: #94a3b8; \r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n margin: 0;\r\n }\r\n\r\n \/* Responsive Design *\/\r\n @media (max-width: 992px) {\r\n .unio-counter-container { grid-template-columns: repeat(2, 1fr); gap: 20px; }\r\n }\r\n\r\n @media (max-width: 576px) {\r\n .unio-counter-container { grid-template-columns: 1fr; gap: 20px; }\r\n .unio-counter-wrapper { padding: 20px 0; } \/* Mobile par bhi height kam ki *\/\r\n }\r\n<\/style>\r\n\r\n<div class=\"unio-counter-wrapper\">\r\n <div class=\"unio-counter-container\" id=\"unio-counter-section\">\r\n \r\n <div class=\"unio-counter-box\">\r\n <div class=\"unio-counter-icon\"><i class=\"fas fa-building\"><\/i><\/div>\r\n <div class=\"unio-counter-number-wrap\">\r\n <span class=\"unio-counter-value\" data-target=\"250\">0<\/span>\r\n <span class=\"unio-counter-plus\">+<\/span>\r\n <\/div>\r\n <p class=\"unio-counter-label\">Corporate Clients<\/p>\r\n <\/div>\r\n\r\n <div class=\"unio-counter-box\">\r\n <div class=\"unio-counter-icon\"><i class=\"fas fa-laptop-medical\"><\/i><\/div>\r\n <div class=\"unio-counter-number-wrap\">\r\n <span class=\"unio-counter-value\" data-target=\"5000\">0<\/span>\r\n <span class=\"unio-counter-plus\">+<\/span>\r\n <\/div>\r\n <p class=\"unio-counter-label\">IT Issues Resolved<\/p>\r\n <\/div>\r\n\r\n <div class=\"unio-counter-box\">\r\n <div class=\"unio-counter-icon\"><i class=\"fas fa-server\"><\/i><\/div>\r\n <div class=\"unio-counter-number-wrap\">\r\n <span class=\"unio-counter-value\" data-target=\"150\">0<\/span>\r\n <span class=\"unio-counter-plus\">+<\/span>\r\n <\/div>\r\n <p class=\"unio-counter-label\">Active AMCs<\/p>\r\n <\/div>\r\n\r\n <div class=\"unio-counter-box\">\r\n <div class=\"unio-counter-icon\"><i class=\"fas fa-user-tie\"><\/i><\/div>\r\n <div class=\"unio-counter-number-wrap\">\r\n <span class=\"unio-counter-value\" data-target=\"10\">0<\/span>\r\n <span class=\"unio-counter-plus\">+<\/span>\r\n <\/div>\r\n <p class=\"unio-counter-label\">Years Expertise<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n (function() {\r\n function initCounters() {\r\n const counters = document.querySelectorAll('.unio-counter-value');\r\n const speed = 50; \r\n\r\n const startCounting = (counter) => {\r\n const target = +counter.getAttribute('data-target');\r\n const updateCount = () => {\r\n const count = +counter.innerText;\r\n const inc = Math.ceil(target \/ speed);\r\n\r\n if (count < target) {\r\n counter.innerText = count + inc;\r\n setTimeout(updateCount, 30);\r\n } else {\r\n counter.innerText = target;\r\n }\r\n };\r\n updateCount();\r\n };\r\n\r\n const observer = new IntersectionObserver((entries, obs) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n startCounting(entry.target);\r\n obs.unobserve(entry.target); \r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n\r\n counters.forEach(counter => {\r\n observer.observe(counter);\r\n });\r\n }\r\n\r\n if (document.readyState === 'complete' || document.readyState === 'interactive') {\r\n setTimeout(initCounters, 100);\r\n } else {\r\n document.addEventListener(\"DOMContentLoaded\", initCounters);\r\n }\r\n })();\r\n<\/script>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3a63cb4 e-con e-atomic-element e-flexbox-base e-3a63cb4-6feb3c8 \" data-id=\"3a63cb4\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3a63cb4\">\n \t\t<div class=\"elementor-element elementor-element-af3b7da elementor-widget elementor-widget-html\" data-id=\"af3b7da\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n \/* Section Container *\/\r\n .cns-promo-section {\r\n padding: 80px 20px;\r\n background-color: #f8fafc; \/* Halka sa grey\/blue background *\/\r\n font-family: 'Inter', sans-serif;\r\n }\r\n\r\n .cns-promo-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n display: flex;\r\n align-items: center;\r\n gap: 60px;\r\n }\r\n\r\n \/* Left Side: Image *\/\r\n .cns-promo-img-col {\r\n flex: 1;\r\n }\r\n\r\n .cns-promo-img {\r\n width: 100%;\r\n max-width: 550px;\r\n height: auto;\r\n border-radius: 15px;\r\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .cns-promo-img:hover {\r\n transform: translateY(-10px); \/* Hover par thoda upar uthegi *\/\r\n }\r\n\r\n \/* Right Side: Content *\/\r\n .cns-promo-text-col {\r\n flex: 1;\r\n }\r\n\r\n .cns-promo-tag {\r\n display: inline-block;\r\n background: rgba(243, 112, 33, 0.1);\r\n color: #f37021;\r\n font-weight: 700;\r\n padding: 6px 16px;\r\n border-radius: 30px;\r\n font-size: 14px;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .cns-promo-title {\r\n font-size: 42px;\r\n font-weight: 900;\r\n color: #0f172a;\r\n line-height: 1.2;\r\n margin-bottom: 20px;\r\n }\r\n\r\n .cns-promo-title span {\r\n color: #f37021; \/* Connect&Secure Orange *\/\r\n }\r\n\r\n .cns-promo-desc {\r\n font-size: 18px;\r\n color: #475569;\r\n line-height: 1.6;\r\n margin-bottom: 30px;\r\n }\r\n\r\n \/* Bullet Points *\/\r\n .cns-promo-features {\r\n list-style: none;\r\n padding: 0;\r\n margin: 0 0 40px 0;\r\n }\r\n\r\n .cns-promo-features li {\r\n font-size: 17px;\r\n color: #1e293b;\r\n font-weight: 600;\r\n margin-bottom: 15px;\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .cns-promo-features li i {\r\n color: #22c55e; \/* Green check icon *\/\r\n font-size: 20px;\r\n }\r\n\r\n \/* Call to Action Button *\/\r\n .cns-promo-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n background: #0f172a;\r\n color: #ffffff;\r\n padding: 16px 40px;\r\n font-size: 18px;\r\n font-weight: 700;\r\n border-radius: 8px;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);\r\n }\r\n\r\n .cns-promo-btn:hover {\r\n background: #f37021;\r\n color: #ffffff;\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 25px rgba(243, 112, 33, 0.3);\r\n }\r\n\r\n \/* Responsive Design for Mobile *\/\r\n @media (max-width: 991px) {\r\n .cns-promo-container {\r\n flex-direction: column;\r\n text-align: center;\r\n gap: 40px;\r\n }\r\n\r\n .cns-promo-title {\r\n font-size: 32px;\r\n }\r\n\r\n .cns-promo-features li {\r\n justify-content: center;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section class=\"cns-promo-section\">\r\n <div class=\"cns-promo-container\">\r\n \r\n <!-- Left Column: Image -->\r\n <div class=\"cns-promo-img-col\">\r\n <img decoding=\"async\" src=\"https:\/\/uniresources.in\/uspl\/wp-content\/uploads\/2026\/06\/WhatsApp-Image-2026-06-27-at-8.44.21-AM.jpeg\" alt=\"IT AMC Plans by Connect&Secure\" class=\"cns-promo-img\">\r\n <\/div>\r\n\r\n <!-- Right Column: Content -->\r\n <div class=\"cns-promo-text-col\">\r\n <div class=\"cns-promo-tag\">Smart IT Support<\/div>\r\n <h2 class=\"cns-promo-title\">Stop Paying Per Visit. <br><span>Switch to AMC!<\/span><\/h2>\r\n <p class=\"cns-promo-desc\">Why pay heavy charges every time your system breaks down? Get predictable, stress-free IT support that keeps your business running without interruptions.<\/p>\r\n \r\n <ul class=\"cns-promo-features\">\r\n <li><i class=\"fas fa-check-circle\"><\/i> Affordable Fixed Cost Plan (Starts at \u20b9799)<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Proactive Maintenance & Regular Checkups<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Lightning-Fast Remote & Priority Support<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Zero Downtime, Maximum Productivity<\/li>\r\n <\/ul>\r\n\r\n <a href=\"tel:+917669256669\" class=\"cns-promo-btn\">Call Now: +91 98737 37020<\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f11ed9c elementor-widget elementor-widget-html\" data-id=\"f11ed9c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');\r\n\r\n .uniotech-amc-wrapper {\r\n font-family: 'Inter', sans-serif;\r\n background-color: #f8fafc;\r\n padding: 90px 0;\r\n color: #0f172a;\r\n }\r\n\r\n .amc-container { max-width: 1200px; margin: 0 auto; padding: 0 25px; }\r\n\r\n \/* Section Header Styling *\/\r\n .amc-header { text-align: center; margin-bottom: 70px; }\r\n\r\n .amc-badge {\r\n display: inline-block;\r\n background: rgba(37, 99, 235, 0.1);\r\n color: #2563eb;\r\n font-size: 12px;\r\n font-weight: 700;\r\n text-transform: uppercase;\r\n padding: 8px 16px;\r\n border-radius: 50px;\r\n letter-spacing: 1px;\r\n margin-bottom: 15px;\r\n }\r\n\r\n .amc-header h2 { font-size: 42px; font-weight: 800; color: #0f172a; letter-spacing: -1px; margin: 0 0 20px 0; }\r\n\r\n .amc-header p { font-size: 16px; color: #64748b; max-width: 600px; margin: 0 auto; line-height: 1.6; }\r\n\r\n \/* Pricing Grid Layout *\/\r\n .amc-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; align-items: center; }\r\n\r\n \/* Individual Pricing Card *\/\r\n .amc-card {\r\n background: #ffffff;\r\n border-radius: 20px;\r\n padding: 40px;\r\n border: 1px solid #e2e8f0;\r\n box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);\r\n transition: all 0.4s ease;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n }\r\n\r\n .amc-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08); }\r\n\r\n \/* Highlighted Card (Middle) *\/\r\n .amc-card.featured { border: 2px solid #f37021; transform: scale(1.05); box-shadow: 0 25px 50px rgba(243, 112, 33, 0.1); z-index: 10; }\r\n .amc-card.featured:hover { transform: scale(1.05) translateY(-10px); }\r\n\r\n .amc-popular-tag {\r\n position: absolute; top: -16px; left: 50%; transform: translateX(-50%);\r\n background: #f37021; color: #ffffff; font-size: 12px; font-weight: 700;\r\n padding: 6px 20px; border-radius: 50px; text-transform: uppercase;\r\n letter-spacing: 1px; box-shadow: 0 4px 10px rgba(243, 112, 33, 0.3);\r\n }\r\n\r\n \/* Card Content Styles *\/\r\n .amc-plan-name { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0 0 10px 0; }\r\n .amc-plan-desc { font-size: 14px; color: #64748b; margin: 0 0 25px 0; line-height: 1.5; }\r\n \r\n \/* Price added *\/\r\n .amc-price { font-size: 32px; font-weight: 800; color: #0f172a; margin: 0 0 20px 0; }\r\n .amc-price span { font-size: 16px; font-weight: 600; color: #f37021; }\r\n\r\n .amc-divider { height: 1px; background: #e2e8f0; margin: 0 0 30px 0; }\r\n\r\n \/* Features List *\/\r\n .amc-features { list-style: none; padding: 0; margin: 0 0 40px 0; flex-grow: 1; }\r\n .amc-features li { font-size: 15px; color: #334155; margin-bottom: 16px; display: flex; align-items: flex-start; gap: 12px; line-height: 1.4; }\r\n .amc-features li i { color: #2563eb; font-size: 16px; margin-top: 3px; }\r\n .amc-card.featured .amc-features li i { color: #f37021; }\r\n .amc-features li.disabled { color: #94a3b8; text-decoration: line-through; }\r\n .amc-features li.disabled i { color: #cbd5e1; }\r\n\r\n \/* CTA Buttons *\/\r\n .amc-btn { display: block; text-align: center; padding: 15px 0; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; }\r\n .btn-outline { background: transparent; color: #0f172a; border: 1px solid #cbd5e1; }\r\n .btn-solid { background: #f37021; color: #ffffff !important; border: 1px solid #f37021; }\r\n\r\n @media (max-width: 992px) { .amc-pricing-grid { grid-template-columns: 1fr; gap: 40px; } .amc-card.featured { transform: scale(1); } }\r\n<\/style>\r\n\r\n<div class=\"uniotech-amc-wrapper\">\r\n <div class=\"amc-container\">\r\n <div class=\"amc-header\">\r\n <span class=\"amc-badge\"><i class=\"fas fa-file-contract\"><\/i> Managed IT Contracts<\/span>\r\n <h2>Transparent AMC Plans for Business<\/h2>\r\n <\/div>\r\n\r\n <div class=\"amc-pricing-grid\">\r\n <div class=\"amc-card\">\r\n <h3 class=\"amc-plan-name\">Essential AMC<\/h3>\r\n <p class=\"amc-plan-desc\">Perfect for small businesses needing reliable remote IT support.<\/p>\r\n <div class=\"amc-price\">799 <span>INR \/ Annual<\/span><\/div>\r\n <div class=\"amc-divider\"><\/div>\r\n <ul class=\"amc-features\">\r\n <li><i class=\"fas fa-check-circle\"><\/i> Remote Desktop Support<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Basic Network Troubleshooting<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Software Updates & Patching<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Anti-Virus Management<\/li>\r\n <li class=\"disabled\"><i class=\"fas fa-times-circle\"><\/i> On-Site Engineer Visits<\/li>\r\n <li class=\"disabled\"><i class=\"fas fa-times-circle\"><\/i> Hardware Replacements<\/li>\r\n <\/ul>\r\n <a href=\"\/uspl\/checkout\/?add-to-cart=370\" class=\"amc-btn btn-outline\">Get Started<\/a>\r\n <\/div>\r\n\r\n <div class=\"amc-card featured\">\r\n <div class=\"amc-popular-tag\">Most Popular<\/div>\r\n <h3 class=\"amc-plan-name\">Comprehensive AMC<\/h3>\r\n <p class=\"amc-plan-desc\">Full-scale corporate IT coverage with priority on-site assistance.<\/p>\r\n <div class=\"amc-price\">1099 <span>INR \/ Annual<\/span><\/div>\r\n <div class=\"amc-divider\"><\/div>\r\n <ul class=\"amc-features\">\r\n <li><i class=\"fas fa-check-circle\"><\/i> Everything in Essential Plan<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Scheduled On-Site Engineer Visits<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Proactive Server Monitoring<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Hardware Repair & Diagnosis<\/li>\r\n \r\n <li><i class=\"fas fa-check-circle\"><\/i> Priority SLA Response Time<\/li>\r\n <\/ul>\r\n <a href=\"uspl\/checkout\/?add-to-cart=397\" class=\"amc-btn btn-solid\">Get Started<\/a>\r\n <\/div>\r\n\r\n <div class=\"amc-card\">\r\n <h3 class=\"amc-plan-name\">Enterprise AMC<\/h3>\r\n <p class=\"amc-plan-desc\">Dedicated infrastructure management for large-scale operations.<\/p>\r\n <div class=\"amc-price\">1599 <span>INR \/ Annual<\/span><\/div>\r\n <div class=\"amc-divider\"><\/div>\r\n <ul class=\"amc-features\">\r\n <li><i class=\"fas fa-check-circle\"><\/i> 24\/7\/365 Dedicated Support<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Dedicated IT Account Manager<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Data Backup & Disaster Recovery<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> IT Security & Compliance Audits<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Complete Hardware Standby Support<\/li>\r\n <li><i class=\"fas fa-check-circle\"><\/i> Custom Network Architecture<\/li>\r\n <\/ul>\r\n <a href=\"uspl\/checkout\/?add-to-cart=370\" class=\"amc-btn btn-outline\">Get Started<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-c4e7031 e-con e-atomic-element e-flexbox-base e-0a9d1d8 \" data-id=\"c4e7031\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"c4e7031\">\n \t\t<div class=\"elementor-element elementor-element-8446326 elementor-widget elementor-widget-google_maps\" data-id=\"8446326\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"google_maps.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-custom-embed\">\n\t\t\t<iframe loading=\"lazy\"\n\t\t\t\t\tsrc=\"https:\/\/maps.google.com\/maps?q=%5Bhttps%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%2Fv1%2Fplace%3Fkey%3DYOUR_API_KEY%26q%3DFortis%2BHospital%2BNoida%2BSector%2B62%5D%28https%3A%2F%2Fwww.google.com%2Fmaps%2Fembed%2Fv1%2Fplace%3Fkey%3DYOUR_API_KEY%26q%3DFortis%2BHospital%2BNoida%2BSector%2B62%29&t=m&z=10&output=embed&iwloc=near\"\n\t\t\t\t\ttitle=\"[https:\/\/www.google.com\/maps\/embed\/v1\/place?key=YOUR_API_KEY&q=Fortis+Hospital+Noida+Sector+62](https:\/\/www.google.com\/maps\/embed\/v1\/place?key=YOUR_API_KEY&q=Fortis+Hospital+Noida+Sector+62)\"\n\t\t\t\t\taria-label=\"[https:\/\/www.google.com\/maps\/embed\/v1\/place?key=YOUR_API_KEY&q=Fortis+Hospital+Noida+Sector+62](https:\/\/www.google.com\/maps\/embed\/v1\/place?key=YOUR_API_KEY&q=Fortis+Hospital+Noida+Sector+62)\"\n\t\t\t><\/iframe>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Premium Enterprise IT Hero Slider – Uniotech Corporate IT Support Comprehensive Hardware AMC Solutions Keep your business operations running flawlessly. We provide unlimited doorstep engineer visits and proactive maintenance for all your enterprise desktops, workstations, and laptops. View AMC Plans Watch Service Demo Zero Downtime Guarantee Enterprise Server & Network Management Secure your core infrastructure […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/uniresources.in\/uspl\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/uniresources.in\/uspl\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/uniresources.in\/uspl\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/uniresources.in\/uspl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/uniresources.in\/uspl\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":78,"href":"https:\/\/uniresources.in\/uspl\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":720,"href":"https:\/\/uniresources.in\/uspl\/wp-json\/wp\/v2\/pages\/10\/revisions\/720"}],"wp:attachment":[{"href":"https:\/\/uniresources.in\/uspl\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}