{"id":3303,"date":"2015-08-30T14:27:22","date_gmt":"2015-08-30T14:27:22","guid":{"rendered":"http:\/\/sw-themes.com\/porto_dummy\/?page_id=3303"},"modified":"2026-01-31T11:28:35","modified_gmt":"2026-01-31T11:28:35","slug":"home","status":"publish","type":"page","link":"https:\/\/khantelecom.net\/","title":{"rendered":""},"content":{"rendered":"\n
<\/code><\/pre>\n\n\n\n\n\n\n    \n    \n    Khan Telecom – Premium Internet Hardware & Networking Solutions<\/title>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/animate.css\/4.1.1\/animate.min.css\">\n    <style>\n        \/* CSS Variables for Theme - Updated Colors *\/\n        :root {\n            --primary: #0088cc;\n            --primary-dark: #006699;\n            --primary-light: #4db8ff;\n            --secondary: #ed8446;\n            --secondary-dark: #d2691e;\n            --accent: #27ae60;\n            --dark: #1a2b3c;\n            --light: #f8f9fa;\n            --gray: #6c757d;\n            --gray-light: #e9ecef;\n            --shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n            --shadow-heavy: 0 15px 40px rgba(0, 0, 0, 0.15);\n            --transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n            --border-radius: 10px;\n            --border-radius-sm: 5px;\n        }\n        \n        \/* Reset and Base Styles *\/\n        * {\n            margin: 0;\n            padding: 0;\n            box-sizing: border-box;\n        }\n        \n        html {\n            scroll-behavior: smooth;\n            scroll-padding-top: 80px;\n        }\n        \n        body {\n            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n            line-height: 1.6;\n            color: var(--dark);\n            background-color: #f9fafb;\n            overflow-x: hidden;\n            padding-top: 80px !important;\n        }\n        \n        .container {\n            width: 100%;\n            max-width: 1200px;\n            margin: 0 auto;\n            padding: 0 15px;\n        }\n        \n        \/* Navigation *\/\n        .navbar {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            z-index: 1000;\n            background: rgba(255, 255, 255, 0.95);\n            backdrop-filter: blur(10px);\n            padding: 15px 0;\n            transition: var(--transition);\n            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n        }\n        \n        .navbar.scrolled {\n            padding: 10px 0;\n            background: rgba(255, 255, 255, 0.98);\n        }\n        \n        .nav-container {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n        }\n        \n        .logo {\n            display: flex;\n            align-items: center;\n            color: var(--primary);\n            text-decoration: none;\n            font-weight: 700;\n            font-size: 24px;\n        }\n        \n        .logo i {\n            color: var(--primary);\n            margin-right: 10px;\n            font-size: 28px;\n        }\n        \n        .nav-links {\n            display: flex;\n            list-style: none;\n        }\n        \n        .nav-links li {\n            margin-left: 30px;\n        }\n        \n        .nav-links a {\n            color: var(--dark);\n            text-decoration: none;\n            font-weight: 500;\n            font-size: 16px;\n            position: relative;\n            padding: 5px 0;\n            transition: var(--transition);\n        }\n        \n        .nav-links a:hover {\n            color: var(--primary);\n        }\n        \n        .nav-links a::after {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 0;\n            height: 2px;\n            background-color: var(--primary);\n            transition: width 0.3s ease;\n        }\n        \n        .nav-links a:hover::after {\n            width: 100%;\n        }\n        \n        .mobile-menu-btn {\n            display: none;\n            background: none;\n            border: none;\n            color: var(--dark);\n            font-size: 24px;\n            cursor: pointer;\n        }\n        \n        \/* HERO SECTION *\/\n        .hero {\n            position: relative;\n            min-height: 350px;\n            max-height: 350px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);\n            color: var(--dark);\n            overflow: hidden;\n            padding-top: 40px;\n            margin-top: 0;\n        }\n        \n        .hero-bg {\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            opacity: 0.3;\n            z-index: 0;\n        }\n        \n        .hero-bg i {\n            position: absolute;\n            font-size: 60px;\n            color: rgba(0, 136, 204, 0.2);\n            animation: float 20s infinite linear;\n        }\n        \n        @keyframes float {\n            0% { transform: translateY(0) rotate(0deg); }\n            100% { transform: translateY(-1000px) rotate(360deg); }\n        }\n        \n        .hero-content {\n            position: relative;\n            z-index: 1;\n            text-align: center;\n            max-width: 900px;\n            padding: 20px;\n        }\n        \n        .hero h1 {\n            font-size: 2.8rem;\n            margin-bottom: 15px;\n            color: var(--primary-dark);\n        }\n        \n        .hero p {\n            font-size: 1.3rem;\n            margin-bottom: 25px;\n            opacity: 0.9;\n            max-width: 700px;\n            margin-left: auto;\n            margin-right: auto;\n            color: var(--dark);\n            line-height: 1.6;\n        }\n        \n        .hero-btns {\n            display: flex;\n            justify-content: center;\n            gap: 20px;\n            flex-wrap: wrap;\n        }\n        \n        .btn {\n            display: inline-block;\n            padding: 14px 28px;\n            font-size: 17px;\n            font-weight: 600;\n            text-decoration: none;\n            border-radius: 5px;\n            transition: all 0.3s ease;\n            border: none;\n            cursor: pointer;\n        }\n        \n        .btn-primary {\n            background-color: var(--primary);\n            color: white;\n        }\n        \n        .btn-primary:hover {\n            background-color: var(--primary-dark);\n            transform: translateY(-3px);\n            box-shadow: 0 10px 20px rgba(0,0,0,0.1);\n        }\n        \n        .btn-contact {\n            background: var(--secondary);\n            color: white;\n            padding: 14px 28px;\n            font-size: 17px;\n            font-weight: 600;\n            border-radius: 5px;\n            transition: all 0.3s ease;\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n        }\n        \n        .btn-contact:hover {\n            background: var(--secondary-dark);\n            transform: translateY(-3px);\n            box-shadow: 0 10px 20px rgba(237, 132, 70, 0.2);\n        }\n        \n        .scroll-down {\n            position: absolute;\n            bottom: 20px;\n            left: 50%;\n            transform: translateX(-50%);\n            color: var(--primary);\n            font-size: 24px;\n            animation: bounce 2s infinite;\n            z-index: 2;\n        }\n        \n        @keyframes bounce {\n            0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}\n            40% {transform: translateY(-10px) translateX(-50%);}\n            60% {transform: translateY(-5px) translateX(-50%);}\n        }\n        \n        \/* Section Styling *\/\n        .section {\n            padding: 100px 0;\n            scroll-margin-top: 80px;\n        }\n        \n        .section-title {\n            text-align: center;\n            margin-bottom: 60px;\n            position: relative;\n        }\n        \n        .section-title h2 {\n            font-size: 2.8rem;\n            color: var(--dark);\n            margin-bottom: 15px;\n        }\n        \n        .section-title p {\n            font-size: 1.2rem;\n            color: var(--gray);\n            max-width: 600px;\n            margin: 0 auto;\n        }\n        \n        .section-title::after {\n            content: '';\n            position: absolute;\n            bottom: -15px;\n            left: 50%;\n            transform: translateX(-50%);\n            width: 80px;\n            height: 4px;\n            background: linear-gradient(to right, var(--primary), var(--secondary));\n            border-radius: 2px;\n        }\n        \n        \/* Products Section *\/\n        .products-section {\n            background-color: white;\n        }\n        \n        .filter-buttons {\n            display: flex;\n            justify-content: center;\n            flex-wrap: wrap;\n            gap: 15px;\n            margin-bottom: 50px;\n        }\n        \n        .filter-btn {\n            padding: 12px 25px;\n            background: var(--gray-light);\n            border: 2px solid transparent;\n            border-radius: 30px;\n            font-size: 16px;\n            font-weight: 600;\n            color: var(--dark);\n            cursor: pointer;\n            transition: var(--transition);\n        }\n        \n        .filter-btn:hover {\n            background: var(--primary-light);\n            color: white;\n            transform: translateY(-3px);\n        }\n        \n        .filter-btn.active {\n            background: var(--primary);\n            color: white;\n            border-color: var(--primary);\n            box-shadow: 0 5px 15px rgba(0, 86, 179, 0.2);\n        }\n        \n        .products-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n            gap: 30px;\n            margin-bottom: 50px;\n        }\n        \n        .product-item {\n            opacity: 1;\n            transform: translateY(0);\n            transition: opacity 0.5s ease, transform 0.5s ease;\n        }\n        \n        .product-item.hidden {\n            opacity: 0;\n            transform: translateY(20px);\n            position: absolute;\n            visibility: hidden;\n        }\n        \n        .product-card {\n            background: white;\n            border-radius: var(--border-radius);\n            overflow: hidden;\n            box-shadow: var(--shadow);\n            transition: var(--transition);\n            height: 100%;\n            position: relative;\n            display: flex;\n            flex-direction: column;\n        }\n        \n        .product-card:hover {\n            transform: translateY(-10px);\n            box-shadow: var(--shadow-heavy);\n        }\n        \n        .product-img {\n            height: 220px;\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            padding: 20px;\n            position: relative;\n            overflow: hidden;\n        }\n        \n        .product-img img {\n            max-width: 100%;\n            max-height: 180px;\n            object-fit: contain;\n            transition: var(--transition);\n        }\n        \n        .product-card:hover .product-img img {\n            transform: scale(1.1);\n        }\n        \n        .brand-badge {\n            position: absolute;\n            top: 15px;\n            left: 15px;\n            background: var(--primary);\n            color: white;\n            font-size: 11px;\n            padding: 5px 12px;\n            border-radius: 30px;\n            font-weight: 600;\n            letter-spacing: 0.5px;\n        }\n        \n        .product-info {\n            padding: 25px;\n            flex-grow: 1;\n            display: flex;\n            flex-direction: column;\n        }\n        \n        .product-category {\n            font-size: 12px;\n            color: var(--secondary);\n            text-transform: uppercase;\n            letter-spacing: 1px;\n            margin-bottom: 8px;\n            font-weight: 700;\n        }\n        \n        .product-title {\n            font-size: 18px;\n            font-weight: 700;\n            color: var(--dark);\n            margin-bottom: 12px;\n            line-height: 1.4;\n        }\n        \n        .product-price-container {\n            margin: 15px 0;\n            padding: 10px 0;\n            border-top: 1px solid var(--gray-light);\n            border-bottom: 1px solid var(--gray-light);\n        }\n        \n        .contact-price {\n            font-size: 18px;\n            font-weight: 700;\n            color: var(--secondary);\n            display: flex;\n            align-items: center;\n            gap: 8px;\n        }\n        \n        .product-features {\n            margin-top: 15px;\n            font-size: 14px;\n            color: var(--gray);\n            display: flex;\n            flex-wrap: wrap;\n            gap: 8px;\n        }\n        \n        .product-features span {\n            background: var(--gray-light);\n            padding: 4px 10px;\n            border-radius: 20px;\n            font-size: 12px;\n        }\n        \n        .product-actions {\n            margin-top: 20px;\n            padding-top: 15px;\n            border-top: 1px solid var(--gray-light);\n        }\n        \n        \/* Services Section *\/\n        .services-section {\n            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);\n        }\n        \n        .services-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 30px;\n        }\n        \n        .service-card {\n            background: white;\n            border-radius: var(--border-radius);\n            padding: 40px 30px;\n            text-align: center;\n            box-shadow: var(--shadow);\n            transition: var(--transition);\n            position: relative;\n            overflow: hidden;\n            z-index: 1;\n        }\n        \n        .service-card::before {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 5px;\n            background: linear-gradient(to right, var(--primary), var(--secondary));\n            z-index: 2;\n        }\n        \n        .service-card:hover {\n            transform: translateY(-10px);\n            box-shadow: var(--shadow-heavy);\n        }\n        \n        .service-icon {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 80px;\n            height: 80px;\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);\n            color: white;\n            border-radius: 50%;\n            margin-bottom: 25px;\n            font-size: 32px;\n            transition: var(--transition);\n        }\n        \n        .service-card:hover .service-icon {\n            transform: rotateY(180deg) scale(1.1);\n        }\n        \n        .service-card h3 {\n            font-size: 22px;\n            margin-bottom: 15px;\n            color: var(--dark);\n        }\n        \n        .service-card .price {\n            font-size: 28px;\n            font-weight: 800;\n            color: var(--primary);\n            margin-bottom: 10px;\n        }\n        \n        .service-card .period {\n            font-size: 14px;\n            color: var(--gray);\n            margin-bottom: 20px;\n        }\n        \n        .service-card ul {\n            list-style: none;\n            text-align: left;\n            margin-top: 20px;\n        }\n        \n        .service-card ul li {\n            margin-bottom: 10px;\n            padding-left: 25px;\n            position: relative;\n        }\n        \n        .service-card ul li::before {\n            content: '\\f00c';\n            font-family: 'Font Awesome 5 Free';\n            font-weight: 900;\n            position: absolute;\n            left: 0;\n            color: var(--accent);\n        }\n        \n        \/* Contact Section *\/\n        .contact-section {\n            background-color: white;\n        }\n        \n        .contact-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n            gap: 40px;\n        }\n        \n        .contact-info {\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\n            color: white;\n            padding: 40px;\n            border-radius: var(--border-radius);\n            box-shadow: var(--shadow);\n        }\n        \n        .contact-info h3 {\n            font-size: 28px;\n            margin-bottom: 30px;\n            position: relative;\n            padding-bottom: 15px;\n        }\n        \n        .contact-info h3::after {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 60px;\n            height: 3px;\n            background: var(--secondary);\n        }\n        \n        .contact-details {\n            margin-bottom: 30px;\n        }\n        \n        .contact-detail {\n            display: flex;\n            align-items: flex-start;\n            margin-bottom: 25px;\n        }\n        \n        .contact-detail i {\n            font-size: 20px;\n            color: var(--secondary);\n            margin-right: 15px;\n            margin-top: 5px;\n            min-width: 20px;\n        }\n        \n        .contact-form {\n            background: white;\n            padding: 40px;\n            border-radius: var(--border-radius);\n            box-shadow: var(--shadow);\n        }\n        \n        .form-group {\n            margin-bottom: 25px;\n        }\n        \n        .form-control {\n            width: 100%;\n            padding: 15px 20px;\n            font-size: 16px;\n            border: 2px solid var(--gray-light);\n            border-radius: var(--border-radius-sm);\n            transition: var(--transition);\n            background: #f9fafb;\n        }\n        \n        .form-control:focus {\n            border-color: var(--primary);\n            box-shadow: 0 0 0 3px rgba(0, 136, 204, 0.1);\n            outline: none;\n            background: white;\n        }\n        \n        textarea.form-control {\n            min-height: 150px;\n            resize: vertical;\n        }\n        \n        .submit-btn {\n            background: linear-gradient(to right, var(--primary), var(--primary-dark));\n            color: white;\n            padding: 16px 40px;\n            font-size: 16px;\n            font-weight: 600;\n            border: none;\n            border-radius: var(--border-radius-sm);\n            cursor: pointer;\n            transition: var(--transition);\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 10px;\n        }\n        \n        .submit-btn:hover {\n            transform: translateY(-3px);\n            box-shadow: 0 10px 20px rgba(0, 136, 204, 0.2);\n        }\n        \n        \/* Stats Section *\/\n        .stats-section {\n            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);\n            color: white;\n            padding: 80px 0;\n        }\n        \n        .stats-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n            gap: 30px;\n            text-align: center;\n        }\n        \n        .stat-item {\n            padding: 30px;\n        }\n        \n        .stat-number {\n            font-size: 3.5rem;\n            font-weight: 800;\n            color: white;\n            margin-bottom: 10px;\n            line-height: 1;\n        }\n        \n        .stat-text {\n            font-size: 18px;\n            opacity: 0.9;\n        }\n        \n        \/* Footer *\/\n        .footer {\n            background: var(--dark);\n            color: white;\n            padding: 70px 0 30px;\n        }\n        \n        .footer-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 40px;\n            margin-bottom: 50px;\n        }\n        \n        .footer-logo {\n            display: flex;\n            align-items: center;\n            margin-bottom: 20px;\n            color: white;\n            text-decoration: none;\n            font-weight: 700;\n            font-size: 28px;\n        }\n        \n        .footer-logo i {\n            color: var(--primary-light);\n            margin-right: 10px;\n            font-size: 32px;\n        }\n        \n        .footer-about p {\n            margin-bottom: 20px;\n            opacity: 0.8;\n        }\n        \n        .footer-links h4,\n        .footer-contact h4 {\n            font-size: 20px;\n            margin-bottom: 25px;\n            position: relative;\n            padding-bottom: 10px;\n        }\n        \n        .footer-links h4::after,\n        .footer-contact h4::after {\n            content: '';\n            position: absolute;\n            bottom: 0;\n            left: 0;\n            width: 50px;\n            height: 3px;\n            background: var(--secondary);\n        }\n        \n        .footer-links ul {\n            list-style: none;\n        }\n        \n        .footer-links li {\n            margin-bottom: 12px;\n        }\n        \n        .footer-links a {\n            color: rgba(255, 255, 255, 0.8);\n            text-decoration: none;\n            transition: var(--transition);\n        }\n        \n        .footer-links a:hover {\n            color: var(--primary-light);\n            padding-left: 5px;\n        }\n        \n        .social-links {\n            display: flex;\n            gap: 15px;\n            margin-top: 20px;\n        }\n        \n        .social-links a {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 40px;\n            height: 40px;\n            background: rgba(255, 255, 255, 0.1);\n            color: white;\n            border-radius: 50%;\n            transition: var(--transition);\n        }\n        \n        .social-links a:hover {\n            background: var(--primary);\n            transform: translateY(-3px);\n        }\n        \n        .footer-bottom {\n            text-align: center;\n            padding-top: 30px;\n            border-top: 1px solid rgba(255, 255, 255, 0.1);\n            color: rgba(255, 255, 255, 0.6);\n            font-size: 14px;\n        }\n        \n        \/* Animations *\/\n        .fade-in {\n            opacity: 0;\n            transform: translateY(30px);\n            transition: opacity 0.8s ease, transform 0.8s ease;\n        }\n        \n        .fade-in.visible {\n            opacity: 1;\n            transform: translateY(0);\n        }\n        \n        \/* Back to Top Button *\/\n        .back-to-top {\n            position: fixed;\n            bottom: 30px;\n            right: 30px;\n            width: 50px;\n            height: 50px;\n            background: var(--primary);\n            color: white;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            font-size: 20px;\n            cursor: pointer;\n            transition: var(--transition);\n            opacity: 0;\n            visibility: hidden;\n            z-index: 999;\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n        }\n        \n        .back-to-top.show {\n            opacity: 1;\n            visibility: visible;\n        }\n        \n        .back-to-top:hover {\n            background: var(--primary-dark);\n            transform: translateY(-5px);\n        }\n        \n        \/* Modal *\/\n        .modal-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0, 0, 0, 0.8);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 10000;\n            opacity: 0;\n            visibility: hidden;\n            transition: opacity 0.3s ease, visibility 0.3s ease;\n        }\n        \n        .modal-overlay.show {\n            opacity: 1;\n            visibility: visible;\n        }\n        \n        .modal {\n            background: white;\n            border-radius: var(--border-radius);\n            max-width: 600px;\n            width: 90%;\n            padding: 40px;\n            position: relative;\n            transform: translateY(30px);\n            transition: transform 0.3s ease;\n        }\n        \n        .modal-overlay.show .modal {\n            transform: translateY(0);\n        }\n        \n        .modal-close {\n            position: absolute;\n            top: 20px;\n            right: 20px;\n            background: none;\n            border: none;\n            font-size: 24px;\n            color: var(--gray);\n            cursor: pointer;\n            transition: var(--transition);\n        }\n        \n        .modal-close:hover {\n            color: var(--primary);\n        }\n        \n        .modal h3 {\n            font-size: 28px;\n            margin-bottom: 20px;\n            color: var(--dark);\n        }\n        \n        \/* Responsive Design *\/\n        @media (max-width: 992px) {\n            .hero h1 {\n                font-size: 2.2rem;\n            }\n            \n            .section {\n                padding: 80px 0;\n            }\n            \n            .section-title h2 {\n                font-size: 2.2rem;\n            }\n        }\n        \n        @media (max-width: 768px) {\n            .mobile-menu-btn {\n                display: block;\n            }\n            \n            .nav-links {\n                position: fixed;\n                top: 70px;\n                left: 0;\n                width: 100%;\n                background: rgba(255, 255, 255, 0.98);\n                flex-direction: column;\n                padding: 20px;\n                transform: translateY(-100%);\n                opacity: 0;\n                visibility: hidden;\n                transition: var(--transition);\n                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\n            }\n            \n            .nav-links.show {\n                transform: translateY(0);\n                opacity: 1;\n                visibility: visible;\n            }\n            \n            .nav-links li {\n                margin: 0 0 15px 0;\n            }\n            \n            .hero {\n                min-height: 300px;\n                max-height: 300px;\n                padding-top: 20px;\n            }\n            \n            .hero h1 {\n                font-size: 1.8rem;\n            }\n            \n            .hero p {\n                font-size: 1.1rem;\n            }\n            \n            .hero-btns {\n                flex-direction: column;\n                align-items: center;\n            }\n            \n            .section-title h2 {\n                font-size: 1.8rem;\n            }\n            \n            .products-grid {\n                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n            }\n            \n            .stat-number {\n                font-size: 2.5rem;\n            }\n        }\n        \n        @media (max-width: 576px) {\n            body {\n                padding-top: 70px !important;\n            }\n            \n            .navbar {\n                padding: 10px 0;\n            }\n            \n            .hero {\n                min-height: 280px;\n                max-height: 280px;\n                padding-top: 15px;\n            }\n            \n            .hero h1 {\n                font-size: 1.6rem;\n            }\n            \n            .section {\n                padding: 60px 0;\n            }\n            \n            .filter-buttons {\n                gap: 10px;\n            }\n            \n            .filter-btn {\n                padding: 10px 20px;\n                font-size: 14px;\n            }\n            \n            .contact-form,\n            .contact-info {\n                padding: 30px 20px;\n            }\n            \n            .modal {\n                padding: 30px 20px;\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n    <!-- Navigation -->\n    <nav class=\"navbar\">\n        <div class=\"container nav-container\">\n            <a href=\"#home\" class=\"logo\">\n                <span>Khan Telecom<\/span>\n            <\/a>\n            \n            <button class=\"mobile-menu-btn\" id=\"mobileMenuBtn\">\n                <i class=\"fas fa-bars\"><\/i>\n            <\/button>\n            \n            <ul class=\"nav-links\" id=\"navLinks\">\n                <li><a href=\"#home\">Home<\/a><\/li>\n                <li><a href=\"#about\">About<\/a><\/li>\n                <li><a href=\"#products\">Products<\/a><\/li>\n                <li><a href=\"#services\">Services<\/a><\/li>\n                <li><a href=\"#contact\">Contact<\/a><\/li>\n            <\/ul>\n        <\/div>\n    <\/nav>\n\n    <!-- HERO SECTION -->\n    <section class=\"hero\" id=\"home\">\n        <div class=\"hero-bg\" id=\"heroBg\"><\/div>\n        \n        <div class=\"container hero-content animate__animated animate__fadeIn\">\n            <h1>Premium Internet Hardware & Networking Solutions<\/h1>\n            <p>Khan Telecom provides cost-effective, reliable Internet hardware and services with exceptional after-sale support. We don’t just sell products – we build lasting partnerships.<\/p>\n            \n            <div class=\"hero-btns\">\n                <a href=\"#products\" class=\"btn btn-primary\" style=\"padding: 16px 40px; font-size: 18px;\">Explore Products<\/a>\n                <a href=\"#contact\" class=\"btn-contact\">Contact Us for Pricing<\/a>\n            <\/div>\n        <\/div>\n        \n        <a href=\"#about\" class=\"scroll-down\">\n            <i class=\"fas fa-chevron-down\"><\/i>\n        <\/a>\n    <\/section>\n\n    <!-- About Section -->\n    <section class=\"section\" id=\"about\">\n        <div class=\"container\">\n            <div class=\"section-title\">\n                <h2>Who We Are<\/h2>\n                <p>Khan Telecom is a leading provider of networking hardware and internet solutions, committed to delivering excellence through innovative technology and exceptional customer service.<\/p>\n            <\/div>\n            \n            <div class=\"row\" style=\"display: flex; flex-wrap: wrap; align-items: center; gap: 50px;\">\n                <div class=\"col-1-2\" style=\"flex: 1; min-width: 300px;\">\n                    <h3 style=\"font-size: 2rem; margin-bottom: 20px;\">Your Trusted Networking Partner<\/h3>\n                    <p style=\"font-size: 1.1rem; margin-bottom: 20px;\">With over a decade of experience, we specialize in providing high-quality MikroTik equipment and comprehensive networking solutions for businesses and individuals alike.<\/p>\n                    <p style=\"font-size: 1.1rem; margin-bottom: 30px;\">Our team of certified professionals ensures that every product is optimally configured and supported, giving you peace of mind with your networking infrastructure.<\/p>\n                    <a href=\"#contact\" class=\"btn btn-primary\" style=\"padding: 14px 35px;\">Learn More About Us<\/a>\n                <\/div>\n                \n                <div class=\"col-1-2\" style=\"flex: 1; min-width: 300px;\">\n                    <div style=\"background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); padding: 40px; border-radius: var(--border-radius); color: white; box-shadow: var(--shadow);\">\n                        <h4 style=\"font-size: 1.5rem; margin-bottom: 20px;\">Our Commitment<\/h4>\n                        <ul style=\"list-style: none;\">\n                            <li style=\"margin-bottom: 15px; padding-left: 30px; position: relative;\">\n                                <i class=\"fas fa-check\" style=\"position: absolute; left: 0; top: 5px;\"><\/i>\n                                <strong>Genuine Products:<\/strong> 100% authentic hardware with warranties\n                            <\/li>\n                            <li style=\"margin-bottom: 15px; padding-left: 30px; position: relative;\">\n                                <i class=\"fas fa-check\" style=\"position: absolute; left: 0; top: 5px;\"><\/i>\n                                <strong>Expert Installation:<\/strong> Professional setup and configuration\n                            <\/li>\n                            <li style=\"margin-bottom: 15px; padding-left: 30px; position: relative;\">\n                                <i class=\"fas fa-check\" style=\"position: absolute; left: 0; top: 5px;\"><\/i>\n                                <strong>24\/7 Support:<\/strong> Round-the-clock technical assistance\n                            <\/li>\n                            <li style=\"margin-bottom: 15px; padding-left: 30px; position: relative;\">\n                                <i class=\"fas fa-check\" style=\"position: absolute; left: 0; top: 5px;\"><\/i>\n                                <strong>Cost-Effective:<\/strong> Competitive pricing without compromising quality\n                            <\/li>\n                        <\/ul>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Products Section -->\n    <section class=\"section products-section\" id=\"products\">\n        <div class=\"container\">\n            <div class=\"section-title\">\n                <h2>Our Products<\/h2>\n                <p>We offer a wide range of genuine networking equipment from leading brands like MikroTik, TP-Link, Ubiquiti, and Cisco.<\/p>\n            <\/div>\n            \n            <div class=\"filter-buttons\">\n                <button class=\"filter-btn active\" data-filter=\"all\">All Products<\/button>\n                <button class=\"filter-btn\" data-filter=\"mikrotik\">MikroTik<\/button>\n                <button class=\"filter-btn\" data-filter=\"router\">Routers<\/button>\n                <button class=\"filter-btn\" data-filter=\"switch\">Switches<\/button>\n                <button class=\"filter-btn\" data-filter=\"wireless\">Wireless<\/button>\n                <button class=\"filter-btn\" data-filter=\"enterprise\">Enterprise<\/button>\n            <\/div>\n            \n            <div class=\"products-grid\" id=\"productsGrid\">\n                <!-- Products will be dynamically loaded here -->\n            <\/div>\n            \n            <div style=\"text-align: center; margin-top: 30px;\">\n                <button id=\"loadMore\" class=\"btn\" style=\"background: var(--gray-light); color: var(--dark); padding: 14px 40px; font-weight: 600; border-radius: 30px;\">Load More Products<\/button>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Services Section -->\n    <section class=\"section services-section\" id=\"services\">\n        <div class=\"container\">\n            <div class=\"section-title\">\n                <h2>Our Services<\/h2>\n                <p>Comprehensive internet and networking solutions tailored to your specific needs.<\/p>\n            <\/div>\n            \n            <div class=\"services-grid\">\n                <div class=\"service-card fade-in\">\n                    <div class=\"service-icon\">\n                        <i class=\"fas fa-home\"><\/i>\n                    <\/div>\n                    <h3>Residential Internet<\/h3>\n                    <div class=\"price\">Upload\/Download<\/div>\n                    <div class=\"period\">Unlimited<\/div>\n                    <p>High-speed internet for home use with 24\/7 support<\/p>\n                    <ul>\n                        <li>Unlimited Data Transfer<\/li>\n                        <li>Free Installation<\/li>\n                        <li>WiFi Router Included<\/li>\n                        <li>24\/7 Customer Support<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"service-card fade-in\">\n                    <div class=\"service-icon\">\n                        <i class=\"fas fa-building\"><\/i>\n                    <\/div>\n                    <h3>Business Solutions<\/h3>\n                    <div class=\"price\">Custom Plans<\/div>\n                    <div class=\"period\">Tailored to your needs<\/div>\n                    <p>Reliable internet for businesses with SLA guarantees<\/p>\n                    <ul>\n                        <li>Static IP Addresses<\/li>\n                        <li>Priority Support<\/li>\n                        <li>99.9% Uptime Guarantee<\/li>\n                        <li>Advanced Security<\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"service-card fade-in\">\n                    <div class=\"service-icon\">\n                        <i class=\"fas fa-network-wired\"><\/i>\n                    <\/div>\n                    <h3>Enterprise Networking<\/h3>\n                    <div class=\"price\">Consultation<\/div>\n                    <div class=\"period\">Professional Services<\/div>\n                    <p>Complete network design, implementation and management<\/p>\n                    <ul>\n                        <li>Network Design & Planning<\/li>\n                        <li>Hardware Installation<\/li>\n                        <li>Configuration & Optimization<\/li>\n                        <li>Ongoing Management<\/li>\n                    <\/ul>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Contact Section -->\n    <section class=\"section contact-section\" id=\"contact\">\n        <div class=\"container\">\n            <div class=\"section-title\">\n                <h2>Get In Touch<\/h2>\n                <p>Contact us for inquiries, quotes, or technical support. We’re here to help!<\/p>\n            <\/div>\n            \n            <div class=\"contact-grid\">\n                <div class=\"contact-info\">\n                    <h3>Contact Information<\/h3>\n                    \n                    <div class=\"contact-details\">\n                        <div class=\"contact-detail\">\n                            <i class=\"fas fa-map-marker-alt\"><\/i>\n                            <div>\n                                <strong>Address<\/strong><br>\n                                St # 23, Peoples Colony,<br>\n                                Rawalpindi 46000, Pakistan\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"contact-detail\">\n                            <i class=\"fas fa-phone\"><\/i>\n                            <div>\n                                <strong>Phone<\/strong><br>\n                                +92 312 9670 007<br>\n                                +92 334 5067 772\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"contact-detail\">\n                            <i class=\"fas fa-envelope\"><\/i>\n                            <div>\n                                <strong>Email<\/strong><br>\n                                info@khantelecom.net\n                            <\/div>\n                        <\/div>\n                        \n                        <div class=\"contact-detail\">\n                            <i class=\"fas fa-clock\"><\/i>\n                            <div>\n                                <strong>Business Hours<\/strong><br>\n                                Mon – Sat: 9:00 AM to 9:00 PM<br>\n                                Sunday: Closed\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                    \n                    <div class=\"social-links\">\n                        <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n                        <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\n                        <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n                        <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n                        <a href=\"#\"><i class=\"fab fa-whatsapp\"><\/i><\/a>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"contact-form\">\n                    <form id=\"contactForm\">\n                        <h3 style=\"font-size: 24px; margin-bottom: 25px;\">Send Us a Message<\/h3>\n                        \n                        <div class=\"form-group\">\n                            <input type=\"text\" class=\"form-control\" placeholder=\"Your Name\" required>\n                        <\/div>\n                        \n                        <div class=\"form-group\">\n                            <input type=\"email\" class=\"form-control\" placeholder=\"Your Email\" required>\n                        <\/div>\n                        \n                        <div class=\"form-group\">\n                            <input type=\"tel\" class=\"form-control\" placeholder=\"Your Phone\">\n                        <\/div>\n                        \n                        <div class=\"form-group\">\n                            <select class=\"form-control\">\n                                <option value=\"\" disabled selected>Select Service Type<\/option>\n                                <option>Internet Service Inquiry<\/option>\n                                <option>Product Purchase<\/option>\n                                <option>Technical Support<\/option>\n                                <option>Business Solution<\/option>\n                                <option>Other<\/option>\n                            <\/select>\n                        <\/div>\n                        \n                        <div class=\"form-group\">\n                            <textarea class=\"form-control\" placeholder=\"Your Message\" rows=\"5\" required><\/textarea>\n                        <\/div>\n                        \n                        <button type=\"submit\" class=\"submit-btn\">\n                            <span>Send Message<\/span>\n                            <i class=\"fas fa-paper-plane\"><\/i>\n                        <\/button>\n                    <\/form>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/section>\n\n    <!-- Footer -->\n    <footer class=\"footer\">\n        <div class=\"container\">\n            <div class=\"footer-grid\">\n                <div class=\"footer-about\">\n                    <a href=\"#home\" class=\"footer-logo\">\n                        <i class=\"fas fa-satellite-dish\"><\/i>\n                        <span>Khan Telecom<\/span>\n                    <\/a>\n                    <p>Providing reliable internet hardware and services since 2012. We are committed to delivering quality products and exceptional after-sale support.<\/p>\n                    <div class=\"social-links\">\n                        <a href=\"#\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\n                        <a href=\"#\"><i class=\"fab fa-twitter\"><\/i><\/a>\n                        <a href=\"#\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\n                        <a href=\"#\"><i class=\"fab fa-instagram\"><\/i><\/a>\n                    <\/div>\n                <\/div>\n                \n                <div class=\"footer-links\">\n                    <h4>Quick Links<\/h4>\n                    <ul>\n                        <li><a href=\"#home\">Home<\/a><\/li>\n                        <li><a href=\"#about\">About Us<\/a><\/li>\n                        <li><a href=\"#products\">Products<\/a><\/li>\n                        <li><a href=\"#services\">Services<\/a><\/li>\n                        <li><a href=\"#contact\">Contact Us<\/a><\/li>\n                    <\/ul>\n                <\/div>\n                \n                <div class=\"footer-contact\">\n                    <h4>Contact Info<\/h4>\n                    <div style=\"margin-bottom: 15px;\">\n                        <i class=\"fas fa-map-marker-alt\" style=\"color: var(--secondary); margin-right: 10px;\"><\/i>\n                        <span>St # 23, Peoples Colony, Rawalpindi<\/span>\n                    <\/div>\n                    <div style=\"margin-bottom: 15px;\">\n                        <i class=\"fas fa-phone\" style=\"color: var(--secondary); margin-right: 10px;\"><\/i>\n                        <span>+92 312 9670 007<\/span>\n                    <\/div>\n                    <div>\n                        <i class=\"fas fa-envelope\" style=\"color: var(--secondary); margin-right: 10px;\"><\/i>\n                        <span>info@khantelecom.net<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n            \n            <div class=\"footer-bottom\">\n                <p>© 2024 Khan Telecommunications (PVT) LTD. All rights reserved.<\/p>\n            <\/div>\n        <\/div>\n    <\/footer>\n\n    <!-- Back to Top Button -->\n    <div class=\"back-to-top\" id=\"backToTop\">\n        <i class=\"fas fa-chevron-up\"><\/i>\n    <\/div>\n\n    <!-- Success Modal -->\n    <div class=\"modal-overlay\" id=\"successModal\">\n        <div class=\"modal\">\n            <button class=\"modal-close\" id=\"modalClose\">\n                <i class=\"fas fa-times\"><\/i>\n            <\/button>\n            <div style=\"text-align: center; padding: 20px;\">\n                <div style=\"width: 80px; height: 80px; background: var(--accent); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 30px; font-size: 36px;\">\n                    <i class=\"fas fa-check\"><\/i>\n                <\/div>\n                <h3>Thank You!<\/h3>\n                <p style=\"margin: 20px 0; font-size: 16px;\">Your message has been sent successfully. We will contact you within 24 hours.<\/p>\n                <button class=\"btn btn-primary\" id=\"closeModal\" style=\"padding: 12px 30px;\">OK<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n        \/\/ Updated Product Data - No prices, only \"Contact Us for Pricing\"\n        const products = [\n            {\n                id: 1,\n                name: \"MikroTik hEX PoE Router\",\n                category: \"mikrotik router\",\n                brand: \"MikroTik\",\n                features: [\"5 Port\", \"PoE\", \"Dual Core\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-1.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-1.jpg\"\n            },\n            {\n                id: 2,\n                name: \"MikroTik RB4011iGS+RM\",\n                category: \"mikrotik router enterprise\",\n                brand: \"MikroTik\",\n                features: [\"10 Port\", \"1.4 GHz\", \"SFP+\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download.png\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download.png\"\n            },\n            {\n                id: 3,\n                name: \"MikroTik CRS326-24G-2S+\",\n                category: \"mikrotik switch\",\n                brand: \"MikroTik\",\n                features: [\"24 Port\", \"2x SFP+\", \"Layer 3\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-1-1.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-1-1.jpg\"\n            },\n            {\n                id: 4,\n                name: \"MikroTik cAP ac Access Point\",\n                category: \"mikrotik wireless\",\n                brand: \"MikroTik\",\n                features: [\"Dual Band\", \"802.11ac\", \"PoE\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-2.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-2.jpg\"\n            },\n            {\n                id: 5,\n                name: \"MikroTik hEX S (RB760iGS)\",\n                category: \"mikrotik router\",\n                brand: \"MikroTik\",\n                features: [\"5 Port\", \"SFP\", \"Dual Core\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-3.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-3.jpg\"\n            },\n            {\n                id: 6,\n                name: \"MikroTik wAP ac Outdoor AP\",\n                category: \"mikrotik wireless\",\n                brand: \"MikroTik\",\n                features: [\"Outdoor\", \"Dual Band\", \"IP67\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-4.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-4.jpg\"\n            },\n            {\n                id: 7,\n                name: \"TP-Link TL-SG1024D 24-Port\",\n                category: \"switch\",\n                brand: \"TP-Link\",\n                features: [\"24 Port\", \"Rackmount\", \"Gigabit\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-5.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-5.jpg\"\n            },\n            {\n                id: 8,\n                name: \"TP-Link Archer C6 AC1200\",\n                category: \"router wireless\",\n                brand: \"TP-Link\",\n                features: [\"Dual Band\", \"4 Antennas\", \"Gigabit\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-6.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-6.jpg\"\n            },\n            {\n                id: 9,\n                name: \"Ubiquiti UniFi AP AC Lite\",\n                category: \"wireless enterprise\",\n                brand: \"Ubiquiti\",\n                features: [\"802.11ac\", \"PoE\", \"Controller\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-7.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-7.jpg\"\n            },\n            {\n                id: 10,\n                name: \"MikroTik mAP lite\",\n                category: \"mikrotik wireless\",\n                brand: \"MikroTik\",\n                features: [\"Portable\", \"USB Power\", \"WiFi\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-8.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-8.jpg\"\n            },\n            {\n                id: 11,\n                name: \"MikroTik CCR1009-7G-1C\",\n                category: \"mikrotik router enterprise\",\n                brand: \"MikroTik\",\n                features: [\"9 Core\", \"7 Port\", \"SFP+\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-9.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-9.jpg\"\n            },\n            {\n                id: 12,\n                name: \"Cisco SG350-28 28-Port\",\n                category: \"switch enterprise\",\n                brand: \"Cisco\",\n                features: [\"28 Port\", \"Managed\", \"Gigabit\"],\n                img: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-10.jpg\",\n                fallback: \"http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-10.jpg\"\n            }\n        ];\n\n        \/\/ Initialize the website\n        document.addEventListener('DOMContentLoaded', function() {\n            \/\/ Initialize components\n            initNavbar();\n            initHeroBackground();\n            initProducts();\n            initFilterButtons();\n            initContactForm();\n            initBackToTop();\n            initScrollAnimations();\n            \n            \/\/ Preload images\n            preloadImages();\n        });\n\n        \/\/ Navbar functionality\n        function initNavbar() {\n            const navbar = document.querySelector('.navbar');\n            const mobileMenuBtn = document.getElementById('mobileMenuBtn');\n            const navLinks = document.getElementById('navLinks');\n            \n            \/\/ Navbar scroll effect\n            window.addEventListener('scroll', function() {\n                if (window.scrollY > 50) {\n                    navbar.classList.add('scrolled');\n                } else {\n                    navbar.classList.remove('scrolled');\n                }\n            });\n            \n            \/\/ Mobile menu toggle\n            mobileMenuBtn.addEventListener('click', function() {\n                navLinks.classList.toggle('show');\n            });\n            \n            \/\/ Close mobile menu when clicking a link\n            document.querySelectorAll('.nav-links a').forEach(link => {\n                link.addEventListener('click', function() {\n                    navLinks.classList.remove('show');\n                });\n            });\n        }\n\n        \/\/ Hero background animation\n        function initHeroBackground() {\n            const heroBg = document.getElementById('heroBg');\n            const icons = ['fa-wifi', 'fa-satellite', 'fa-server', 'fa-network-wired', 'fa-broadcast-tower', 'fa-ethernet', 'fa-router', 'fa-signal'];\n            \n            \/\/ Create floating icons\n            for (let i = 0; i < 15; i++) {\n                const icon = document.createElement('i');\n                icon.className = `fas ${icons[Math.floor(Math.random() * icons.length)]}`;\n                icon.style.left = `${Math.random() * 100}%`;\n                icon.style.top = `${Math.random() * 100}%`;\n                icon.style.fontSize = `${Math.random() * 30 + 30}px`;\n                icon.style.animationDuration = `${Math.random() * 20 + 20}s`;\n                icon.style.animationDelay = `${Math.random() * 5}s`;\n                \n                heroBg.appendChild(icon);\n            }\n        }\n\n        \/\/ Initialize products\n        function initProducts() {\n            const productsGrid = document.getElementById('productsGrid');\n            const loadMoreBtn = document.getElementById('loadMore');\n            let visibleProducts = 6;\n            \n            \/\/ Function to render products\n            function renderProducts(filter = 'all', count = visibleProducts) {\n                productsGrid.innerHTML = '';\n                \n                const filteredProducts = filter === 'all' \n                    ? products \n                    : products.filter(product => product.category.includes(filter));\n                \n                const productsToShow = filteredProducts.slice(0, count);\n                \n                productsToShow.forEach(product => {\n                    const productElement = document.createElement('div');\n                    productElement.className = 'product-item fade-in';\n                    productElement.setAttribute('data-category', product.category);\n                    \n                    productElement.innerHTML = `\n                        <div class=\"product-card\">\n                            <div class=\"product-img\">\n                                <span class=\"brand-badge\">${product.brand}<\/span>\n                                <img decoding=\"async\" src=\"${product.img}\" alt=\"${product.name}\" data-fallback=\"${product.fallback}\" onerror=\"this.src='${product.fallback}'\">\n                            <\/div>\n                            <div class=\"product-info\">\n                                <div class=\"product-category\">${product.category.split(' ')[0].charAt(0).toUpperCase() + product.category.split(' ')[0].slice(1)}<\/div>\n                                <div class=\"product-title\">${product.name}<\/div>\n                                <div class=\"product-price-container\">\n                                    <div class=\"contact-price\">\n                                        <i class=\"fas fa-phone\"><\/i>\n                                        Contact Us for Pricing\n                                    <\/div>\n                                <\/div>\n                                <div class=\"product-features\">\n                                    ${product.features.map(feature => `<span>${feature}<\/span>`).join('')}\n                                <\/div>\n                                <div class=\"product-actions\">\n                                    <a href=\"#contact\" class=\"btn btn-primary\" style=\"width: 100%; text-align: center; padding: 10px 20px;\">Inquire Now<\/a>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    `;\n                    \n                    productsGrid.appendChild(productElement);\n                });\n                \n                \/\/ Show\/hide load more button\n                if (filteredProducts.length > count) {\n                    loadMoreBtn.style.display = 'inline-block';\n                } else {\n                    loadMoreBtn.style.display = 'none';\n                }\n                \n                \/\/ Trigger fade-in animation\n                setTimeout(() => {\n                    document.querySelectorAll('.product-item').forEach(item => {\n                        item.classList.add('visible');\n                    });\n                }, 100);\n            }\n            \n            \/\/ Initial render\n            renderProducts();\n            \n            \/\/ Load more products\n            loadMoreBtn.addEventListener('click', function() {\n                visibleProducts += 6;\n                const activeFilter = document.querySelector('.filter-btn.active').getAttribute('data-filter');\n                renderProducts(activeFilter, visibleProducts);\n            });\n        }\n\n        \/\/ Filter buttons functionality\n        function initFilterButtons() {\n            const filterButtons = document.querySelectorAll('.filter-btn');\n            \n            filterButtons.forEach(button => {\n                button.addEventListener('click', function() {\n                    \/\/ Remove active class from all buttons\n                    filterButtons.forEach(btn => btn.classList.remove('active'));\n                    \n                    \/\/ Add active class to clicked button\n                    this.classList.add('active');\n                    \n                    \/\/ Reset visible products count\n                    visibleProducts = 6;\n                    \n                    \/\/ Filter products\n                    const filter = this.getAttribute('data-filter');\n                    renderProducts(filter);\n                });\n            });\n        }\n\n        \/\/ Contact form submission\n        function initContactForm() {\n            const contactForm = document.getElementById('contactForm');\n            const successModal = document.getElementById('successModal');\n            const closeModal = document.getElementById('closeModal');\n            const modalClose = document.getElementById('modalClose');\n            \n            contactForm.addEventListener('submit', function(e) {\n                e.preventDefault();\n                \n                \/\/ In a real application, you would send the form data to a server here\n                \/\/ For demo purposes, we'll just show the success modal\n                \n                \/\/ Show success modal\n                successModal.classList.add('show');\n                \n                \/\/ Reset form\n                contactForm.reset();\n            });\n            \n            \/\/ Close modal\n            closeModal.addEventListener('click', function() {\n                successModal.classList.remove('show');\n            });\n            \n            modalClose.addEventListener('click', function() {\n                successModal.classList.remove('show');\n            });\n            \n            \/\/ Close modal when clicking outside\n            successModal.addEventListener('click', function(e) {\n                if (e.target === successModal) {\n                    successModal.classList.remove('show');\n                }\n            });\n        }\n\n        \/\/ Back to top button\n        function initBackToTop() {\n            const backToTop = document.getElementById('backToTop');\n            \n            window.addEventListener('scroll', function() {\n                if (window.scrollY > 300) {\n                    backToTop.classList.add('show');\n                } else {\n                    backToTop.classList.remove('show');\n                }\n            });\n            \n            backToTop.addEventListener('click', function() {\n                window.scrollTo({\n                    top: 0,\n                    behavior: 'smooth'\n                });\n            });\n        }\n\n        \/\/ Scroll animations\n        function initScrollAnimations() {\n            const fadeElements = document.querySelectorAll('.fade-in');\n            \n            function checkScroll() {\n                fadeElements.forEach(element => {\n                    const elementTop = element.getBoundingClientRect().top;\n                    const windowHeight = window.innerHeight;\n                    \n                    if (elementTop < windowHeight - 100) {\n                        element.classList.add('visible');\n                    }\n                });\n            }\n            \n            \/\/ Initial check\n            checkScroll();\n            \n            \/\/ Check on scroll\n            window.addEventListener('scroll', checkScroll);\n        }\n\n        \/\/ Preload images for better performance\n        function preloadImages() {\n            const imageUrls = [\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-1.jpg',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download.png',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-1-1.jpg',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-2.jpg',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-3.jpg',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-4.jpg',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-5.jpg',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-6.jpg',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-7.jpg',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-8.jpg',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-9.jpg',\n                'http:\/\/khantelecom.net\/wp-content\/uploads\/2026\/01\/download-10.jpg'\n            ];\n            \n            imageUrls.forEach(url => {\n                const img = new Image();\n                img.src = url;\n            });\n        }\n\n        \/\/ Global variable for visible products (used in initProducts)\n        let visibleProducts = 6;\n        \n        \/\/ Global renderProducts function (used in initFilterButtons)\n        function renderProducts(filter = 'all', count = visibleProducts) {\n            const productsGrid = document.getElementById('productsGrid');\n            const loadMoreBtn = document.getElementById('loadMore');\n            \n            productsGrid.innerHTML = '';\n            \n            const filteredProducts = filter === 'all' \n                ? products \n                : products.filter(product => product.category.includes(filter));\n            \n            const productsToShow = filteredProducts.slice(0, count);\n            \n            productsToShow.forEach(product => {\n                const productElement = document.createElement('div');\n                productElement.className = 'product-item fade-in';\n                productElement.setAttribute('data-category', product.category);\n                \n                productElement.innerHTML = `\n                    <div class=\"product-card\">\n                        <div class=\"product-img\">\n                            <span class=\"brand-badge\">${product.brand}<\/span>\n                            <img decoding=\"async\" src=\"${product.img}\" alt=\"${product.name}\" data-fallback=\"${product.fallback}\" onerror=\"this.src='${product.fallback}'\">\n                        <\/div>\n                        <div class=\"product-info\">\n                            <div class=\"product-category\">${product.category.split(' ')[0].charAt(0).toUpperCase() + product.category.split(' ')[0].slice(1)}<\/div>\n                            <div class=\"product-title\">${product.name}<\/div>\n                            <div class=\"product-price-container\">\n                                <div class=\"contact-price\">\n                                    <i class=\"fas fa-phone\"><\/i>\n                                    Contact Us for Pricing\n                                <\/div>\n                            <\/div>\n                            <div class=\"product-features\">\n                                ${product.features.map(feature => `<span>${feature}<\/span>`).join('')}\n                            <\/div>\n                            <div class=\"product-actions\">\n                                <a href=\"#contact\" class=\"btn btn-primary\" style=\"width: 100%; text-align: center; padding: 10px 20px;\">Inquire Now<\/a>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                `;\n                \n                productsGrid.appendChild(productElement);\n            });\n            \n            \/\/ Show\/hide load more button\n            if (filteredProducts.length > count) {\n                loadMoreBtn.style.display = 'inline-block';\n            } else {\n                loadMoreBtn.style.display = 'none';\n            }\n            \n            \/\/ Trigger fade-in animation\n            setTimeout(() => {\n                document.querySelectorAll('.product-item').forEach(item => {\n                    item.classList.add('visible');\n                });\n            }, 100);\n        }\n    <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Khan Telecom – Premium Internet Hardware & Networking Solutions Khan Telecom Home About Products Services Contact Premium Internet Hardware & Networking Solutions Khan Telecom provides cost-effective, reliable Internet hardware and services with exceptional after-sale support. We don’t just sell products – we build lasting partnerships. Explore Products Contact Us for<span class=\"more-link\"><a href=\"https:\/\/khantelecom.net\/\">Continue Reading<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["entry","author-oraclemind","post-3303","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/khantelecom.net\/index.php?rest_route=\/wp\/v2\/pages\/3303","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/khantelecom.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/khantelecom.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/khantelecom.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/khantelecom.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3303"}],"version-history":[{"count":68,"href":"https:\/\/khantelecom.net\/index.php?rest_route=\/wp\/v2\/pages\/3303\/revisions"}],"predecessor-version":[{"id":4352,"href":"https:\/\/khantelecom.net\/index.php?rest_route=\/wp\/v2\/pages\/3303\/revisions\/4352"}],"wp:attachment":[{"href":"https:\/\/khantelecom.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}