{"id":24,"date":"2026-09-27T14:14:55","date_gmt":"2026-09-27T14:14:55","guid":{"rendered":"https:\/\/skysoftservices.com\/?page_id=24"},"modified":"2026-09-28T09:28:50","modified_gmt":"2026-09-28T09:28:50","slug":"services","status":"publish","type":"page","link":"https:\/\/skysoftservices.com\/?page_id=24","title":{"rendered":"Services"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"24\" class=\"elementor elementor-24\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f8af88a e-con e-atomic-element e-flexbox-base e-default-div e-4a8c8aa \" data-id=\"f8af88a\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f8af88a\">\n    \t\t<div class=\"elementor-element elementor-element-fa6fd6e elementor-widget elementor-widget-html\" data-id=\"fa6fd6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<title>SkySoft Services \u2014 Our Services<\/title>\r\n<style>\r\n  * { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI', sans-serif; }\r\n  html { scroll-behavior: smooth; }\r\n  body { background:#f8f9fc; color:#222; overflow-x:hidden; }\r\n\r\n  \/* ============ HERO ============ *\/\r\n  .hero {\r\n    background: linear-gradient(135deg, #1e3a8a, #3b82f6);\r\n    color: #fff;\r\n    padding: 80px 20px;\r\n    text-align: center;\r\n  }\r\n  .hero h1 { font-size: 42px; margin-bottom: 15px; font-weight: 700; color: #fff; }\r\n  .hero p { font-size: 18px; max-width: 600px; margin: 0 auto 25px; }\r\n  .btn {\r\n    display:inline-block;\r\n    background:#fff; color:#1e3a8a;\r\n    padding: 12px 30px; border-radius: 30px;\r\n    text-decoration:none; font-weight:600;\r\n    transition: .3s;\r\n    cursor:pointer;\r\n    border:none;\r\n    font-size:15px;\r\n    font-family:inherit;\r\n  }\r\n  .btn:hover { background:#fbbf24; color:#000; }\r\n\r\n  \/* ============================================\r\n     IMAGE SLIDER\r\n  ============================================ *\/\r\n  .slider-section {\r\n    max-width: 1200px;\r\n    margin: -60px auto 50px;\r\n    padding: 0 20px;\r\n    position: relative;\r\n    z-index: 5;\r\n  }\r\n\r\n  .slider-container {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 420px;\r\n    border-radius: 22px;\r\n    overflow: hidden;\r\n    box-shadow: 0 25px 60px -20px rgba(30,58,138,0.45);\r\n    background: #1e3a8a;\r\n  }\r\n\r\n  .slide {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-size: cover;\r\n    background-position: center;\r\n    opacity: 0;\r\n    transition: opacity 1s ease, transform 6s ease;\r\n    transform: scale(1);\r\n    display: flex;\r\n    align-items: flex-end;\r\n  }\r\n  .slide.active {\r\n    opacity: 1;\r\n    transform: scale(1.08);\r\n  }\r\n  .slide::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(10,15,35,0.85) 100%);\r\n  }\r\n\r\n  .slide-content {\r\n    position: relative;\r\n    z-index: 2;\r\n    padding: 35px 40px;\r\n    color: #fff;\r\n    width: 100%;\r\n  }\r\n  .slide-content .slide-tag {\r\n    display: inline-block;\r\n    background: rgba(251,191,36,0.95);\r\n    color: #000;\r\n    padding: 5px 14px;\r\n    border-radius: 20px;\r\n    font-size: 12px;\r\n    font-weight: 700;\r\n    letter-spacing: .5px;\r\n    margin-bottom: 12px;\r\n    text-transform: uppercase;\r\n  }\r\n  .slide-content h3 {\r\n    font-size: 30px;\r\n    margin-bottom: 8px;\r\n    font-weight: 700;\r\n  }\r\n  .slide-content p {\r\n    font-size: 15px;\r\n    max-width: 600px;\r\n    opacity: .95;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  \/* Dots *\/\r\n  .slider-dots {\r\n    position: absolute;\r\n    bottom: 18px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    display: flex;\r\n    gap: 8px;\r\n    z-index: 5;\r\n  }\r\n  .slider-dots button {\r\n    width: 10px;\r\n    height: 10px;\r\n    border-radius: 50%;\r\n    border: none;\r\n    background: rgba(255,255,255,0.5);\r\n    cursor: pointer;\r\n    transition: .3s;\r\n    padding: 0;\r\n  }\r\n  .slider-dots button.active {\r\n    background: #fbbf24;\r\n    width: 28px;\r\n    border-radius: 10px;\r\n  }\r\n  .slider-dots button:hover { background: #fff; }\r\n\r\n  \/* Arrows *\/\r\n  .slider-arrow {\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    background: rgba(255,255,255,0.9);\r\n    color: #1e3a8a;\r\n    width: 46px;\r\n    height: 46px;\r\n    border-radius: 50%;\r\n    border: none;\r\n    font-size: 22px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    z-index: 5;\r\n    transition: .3s;\r\n    font-family: inherit;\r\n    box-shadow: 0 8px 20px rgba(0,0,0,0.15);\r\n  }\r\n  .slider-arrow:hover {\r\n    background: #fbbf24;\r\n    color: #000;\r\n    transform: translateY(-50%) scale(1.1);\r\n  }\r\n  .slider-arrow.prev { left: 18px; }\r\n  .slider-arrow.next { right: 18px; }\r\n\r\n  \/* ============ SERVICES GRID ============ *\/\r\n  .services-title {\r\n    text-align: center;\r\n    max-width: 1200px;\r\n    margin: 0 auto 30px;\r\n    padding: 0 20px;\r\n  }\r\n  .services-title h2 {\r\n    color: #1e3a8a;\r\n    font-size: 30px;\r\n    margin-bottom: 10px;\r\n  }\r\n  .services-title p {\r\n    color: #555;\r\n    font-size: 15px;\r\n    max-width: 600px;\r\n    margin: 0 auto;\r\n  }\r\n\r\n  .services {\r\n    max-width: 1200px;\r\n    margin: 0 auto 60px;\r\n    padding: 0 20px;\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n    gap: 25px;\r\n  }\r\n\r\n  .card {\r\n    position: relative;\r\n    background:#fff;\r\n    padding: 32px 28px 28px;\r\n    border-radius: 18px;\r\n    box-shadow: 0 5px 20px rgba(0,0,0,0.08);\r\n    transition: transform .45s ease, box-shadow .45s ease;\r\n    text-align: center;\r\n    display:flex;\r\n    flex-direction:column;\r\n    overflow: hidden;\r\n    min-height: 340px;\r\n    isolation: isolate;\r\n  }\r\n\r\n  .card:hover {\r\n    transform: translateY(-8px);\r\n    box-shadow: 0 18px 40px rgba(0,0,0,0.22);\r\n  }\r\n\r\n  .card .bg {\r\n    position: absolute;\r\n    inset: 0;\r\n    background-size: cover;\r\n    background-position: center;\r\n    transform: translateY(100%) scale(1.15);\r\n    transition: transform .7s cubic-bezier(.22,.85,.25,1);\r\n    z-index: 0;\r\n  }\r\n  .card .bg::after {\r\n    content: \"\";\r\n    position: absolute;\r\n    inset: 0;\r\n    background: linear-gradient(180deg, rgba(15,25,55,.78), rgba(10,15,35,.92));\r\n  }\r\n  .card:hover .bg { transform: translateY(0) scale(1); }\r\n\r\n  .card .icon,\r\n  .card h3,\r\n  .card p,\r\n  .card .details-btn {\r\n    position: relative;\r\n    z-index: 2;\r\n    transition: color .45s ease;\r\n  }\r\n\r\n  .card .icon {\r\n    font-size: 42px;\r\n    margin-bottom: 16px;\r\n    transition: transform .45s ease;\r\n  }\r\n  .card:hover .icon { transform: translateY(-4px) scale(1.1); }\r\n\r\n  .card h3 {\r\n    color:#1e3a8a;\r\n    font-size: 1.2rem;\r\n    margin-bottom: 10px;\r\n    line-height: 1.35;\r\n    transition: color .45s ease, font-size .45s ease;\r\n  }\r\n  .card p {\r\n    color:#555;\r\n    font-size: 15px;\r\n    line-height: 1.65;\r\n    flex:1;\r\n    margin-bottom: 20px;\r\n    transition: color .45s ease, font-size .45s ease;\r\n  }\r\n\r\n  .card:hover h3 { color:#ffffff; font-size: 1.35rem; }\r\n  .card:hover p { color:#f1f1f1; font-size: 16px; }\r\n\r\n  .card .details-btn {\r\n    display:inline-flex;\r\n    align-items:center;\r\n    justify-content:center;\r\n    gap:8px;\r\n    background:#1e3a8a;\r\n    color:#fff;\r\n    padding: 11px 22px;\r\n    border-radius: 25px;\r\n    text-decoration:none;\r\n    font-weight:600;\r\n    font-size: 14px;\r\n    margin-top:auto;\r\n    transition: background .3s ease, transform .3s ease;\r\n    cursor:pointer;\r\n    border:none;\r\n    font-family:inherit;\r\n    width:100%;\r\n  }\r\n  .card .details-btn:hover {\r\n    background:#fbbf24;\r\n    color:#000;\r\n    transform: translateY(-2px);\r\n  }\r\n\r\n  \/* ============ CTA SECTION ============ *\/\r\n  .cta {\r\n    background:#1e3a8a; color:#fff; text-align:center;\r\n    padding: 60px 20px;\r\n  }\r\n  .cta h2 { margin-bottom: 15px; font-weight: 700; color: #fff; }\r\n  .cta a { background:#fbbf24; color:#000; }\r\n\r\n  \/* ============================================\r\n     SLIDE-IN DETAIL PANEL\r\n  ============================================ *\/\r\n  .detail-overlay {\r\n    position: fixed;\r\n    inset: 0;\r\n    background: rgba(0,0,0,0.5);\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: opacity .4s ease, visibility .4s ease;\r\n    z-index: 998;\r\n    backdrop-filter: blur(2px);\r\n  }\r\n  .detail-overlay.active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n\r\n  .detail-panel {\r\n    position: fixed;\r\n    top: 0;\r\n    right: 0;\r\n    width: 720px;\r\n    max-width: 95%;\r\n    height: 100vh;\r\n    background: #f8f9fc;\r\n    overflow-y: auto;\r\n    z-index: 999;\r\n    transform: translateX(100%);\r\n    transition: transform .55s cubic-bezier(.22,.85,.25,1);\r\n    box-shadow: -20px 0 60px rgba(0,0,0,0.25);\r\n  }\r\n  .detail-panel.active {\r\n    transform: translateX(0);\r\n  }\r\n\r\n  .detail-panel::-webkit-scrollbar { width: 8px; }\r\n  .detail-panel::-webkit-scrollbar-track { background: #e8eefc; }\r\n  .detail-panel::-webkit-scrollbar-thumb { background: #1e3a8a; border-radius: 10px; }\r\n\r\n  .detail-hero {\r\n    background: linear-gradient(135deg, #1e3a8a, #3b82f6);\r\n    color: #fff;\r\n    padding: 55px 35px 90px;\r\n    text-align: center;\r\n    position: relative;\r\n  }\r\n  .detail-hero h1 { font-size: 30px; margin-bottom: 10px; }\r\n  .detail-hero p { font-size: 15px; max-width: 550px; margin: 0 auto; opacity: .92; }\r\n\r\n  .close-btn {\r\n    position: absolute;\r\n    top: 20px; right: 20px;\r\n    background: rgba(255,255,255,0.2);\r\n    color: #fff;\r\n    width: 38px;\r\n    height: 38px;\r\n    border-radius: 50%;\r\n    border: 1px solid rgba(255,255,255,0.4);\r\n    font-size: 20px;\r\n    font-weight: 700;\r\n    cursor: pointer;\r\n    transition: .3s;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    font-family: inherit;\r\n  }\r\n  .close-btn:hover { background:#fff; color:#1e3a8a; transform: rotate(90deg); }\r\n\r\n  .detail-wrap {\r\n    background:#fff;\r\n    border-radius: 18px;\r\n    padding: 35px 30px;\r\n    margin: -70px 20px 30px;\r\n    position: relative;\r\n    z-index: 2;\r\n    box-shadow: 0 15px 40px rgba(0,0,0,0.08);\r\n  }\r\n\r\n  .detail-img {\r\n    width: 100%;\r\n    height: 220px;\r\n    border-radius: 14px;\r\n    background-size: cover;\r\n    background-position: center;\r\n    margin-bottom: 25px;\r\n  }\r\n\r\n  .detail-wrap h2 {\r\n    color:#1e3a8a;\r\n    font-size: 24px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .detail-wrap > p.intro {\r\n    font-size: 15px;\r\n    line-height: 1.8;\r\n    color:#444;\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  .detail-wrap h3 {\r\n    color:#1e3a8a;\r\n    font-size: 19px;\r\n    margin: 25px 0 12px;\r\n    padding-bottom: 8px;\r\n    border-bottom: 2px solid #e8eefc;\r\n  }\r\n\r\n  .feature-list {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin-bottom: 10px;\r\n  }\r\n  .feature-list li {\r\n    padding: 9px 0 9px 32px;\r\n    position: relative;\r\n    font-size: 14.5px;\r\n    line-height: 1.6;\r\n    color:#333;\r\n    border-bottom: 1px solid #f0f0f0;\r\n  }\r\n  .feature-list li::before {\r\n    content: \"\u2714\";\r\n    position: absolute;\r\n    left: 0;\r\n    top: 9px;\r\n    color:#1e3a8a;\r\n    font-weight: bold;\r\n    font-size: 15px;\r\n  }\r\n\r\n  .pricing-box {\r\n    background: linear-gradient(135deg, #eef4ff, #dbe7ff);\r\n    border-left: 5px solid #1e3a8a;\r\n    padding: 18px 20px;\r\n    border-radius: 12px;\r\n    margin: 18px 0;\r\n  }\r\n  .pricing-box p {\r\n    font-size: 14.5px;\r\n    color:#333;\r\n    margin-bottom: 6px;\r\n    line-height: 1.6;\r\n  }\r\n  .pricing-box p:last-child { margin-bottom: 0; }\r\n  .pricing-box strong { color:#1e3a8a; }\r\n\r\n  .faq-item {\r\n    background:#f8f9fc;\r\n    padding: 14px 18px;\r\n    border-radius: 10px;\r\n    margin-bottom: 10px;\r\n    border-left: 4px solid #3b82f6;\r\n  }\r\n  .faq-item h4 {\r\n    font-size: 14.5px;\r\n    color:#1e3a8a;\r\n    margin-bottom: 5px;\r\n  }\r\n  .faq-item p {\r\n    font-size: 13.5px;\r\n    color:#555;\r\n    line-height: 1.6;\r\n  }\r\n\r\n  .contact-now {\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    gap: 10px;\r\n    width: 100%;\r\n    margin-top: 30px;\r\n    padding: 15px 28px;\r\n    background: #25D366;\r\n    color: #fff;\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    border-radius: 50px;\r\n    text-decoration: none;\r\n    transition: .3s;\r\n    box-shadow: 0 10px 25px -10px rgba(37,211,102,0.7);\r\n  }\r\n  .contact-now:hover {\r\n    background: #1ebe5b;\r\n    transform: translateY(-3px);\r\n    box-shadow: 0 15px 30px -10px rgba(37,211,102,0.9);\r\n  }\r\n  .contact-now svg {\r\n    width: 20px; height: 20px; fill:#fff;\r\n  }\r\n\r\n  \/* ============ RESPONSIVE ============ *\/\r\n  @media (max-width: 640px) {\r\n    .hero h1 { font-size: 30px; }\r\n    .hero p { font-size: 16px; }\r\n    .slider-container { height: 300px; border-radius: 16px; }\r\n    .slide-content { padding: 20px 22px; }\r\n    .slide-content h3 { font-size: 20px; }\r\n    .slide-content p { font-size: 13px; }\r\n    .slider-arrow { width: 36px; height: 36px; font-size: 17px; }\r\n    .slider-arrow.prev { left: 10px; }\r\n    .slider-arrow.next { right: 10px; }\r\n    .detail-panel { width: 100%; max-width: 100%; }\r\n    .detail-hero { padding: 50px 22px 80px; }\r\n    .detail-hero h1 { font-size: 22px; }\r\n    .detail-hero p { font-size: 14px; }\r\n    .detail-wrap { padding: 25px 18px; margin: -60px 12px 20px; }\r\n    .detail-img { height: 170px; }\r\n    .detail-wrap h2 { font-size: 20px; }\r\n    .detail-wrap h3 { font-size: 17px; }\r\n  }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- ============================================================\r\n     HERO\r\n============================================================ -->\r\n<section class=\"hero\">\r\n  <h1>Our Services<\/h1>\r\n  <p>SkySoft Services provides top-notch digital solutions to grow your business online.<\/p>\r\n  <button class=\"btn\" onclick=\"document.getElementById('services').scrollIntoView({behavior:'smooth'})\">Explore Services<\/button>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     IMAGE SLIDER (saari 9 services ki images)\r\n============================================================ -->\r\n<section class=\"slider-section\">\r\n  <div class=\"slider-container\" id=\"sliderContainer\">\r\n\r\n    <!-- Slides JS se load honge -->\r\n    <button class=\"slider-arrow prev\" onclick=\"changeSlide(-1)\">\u2039<\/button>\r\n    <button class=\"slider-arrow next\" onclick=\"changeSlide(1)\">\u203a<\/button>\r\n\r\n    <div class=\"slider-dots\" id=\"sliderDots\"><\/div>\r\n  <\/div>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SERVICES TITLE\r\n============================================================ -->\r\n<div class=\"services-title\">\r\n  <h2>What We Offer<\/h2>\r\n  <p>Har service ke baare mein complete details dekhne ke liye \"See Details\" par click karein.<\/p>\r\n<\/div>\r\n\r\n<!-- ============================================================\r\n     SERVICES GRID\r\n============================================================ -->\r\n<section class=\"services\" id=\"services\">\r\n\r\n  <div class=\"card\">\r\n    <div class=\"bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1547658719-da2b51169166?auto=format&fit=crop&w=700&q=80')\"><\/div>\r\n    <div class=\"icon\">\ud83d\udcbb<\/div>\r\n    <h3>Website Development<\/h3>\r\n    <p>Custom websites built with modern tech \u2014 fast, secure & fully responsive.<\/p>\r\n    <button class=\"details-btn\" onclick=\"showDetail('website-development')\">See Details \u2192<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"card\">\r\n    <div class=\"bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1562577309-4932fdd64cd1?auto=format&fit=crop&w=700&q=80')\"><\/div>\r\n    <div class=\"icon\">\ud83d\udd0d<\/div>\r\n    <h3>SEO Optimization<\/h3>\r\n    <p>Rank higher on Google and bring organic traffic to your website.<\/p>\r\n    <button class=\"details-btn\" onclick=\"showDetail('seo-optimization')\">See Details \u2192<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"card\">\r\n    <div class=\"bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1611162616475-46b635cb6868?auto=format&fit=crop&w=700&q=80')\"><\/div>\r\n    <div class=\"icon\">\u25b6\ufe0f<\/div>\r\n    <h3>YouTube Monetization<\/h3>\r\n    <p>Complete setup & guidance to monetize your YouTube channel fast.<\/p>\r\n    <button class=\"details-btn\" onclick=\"showDetail('youtube-monetization')\">See Details \u2192<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"card\">\r\n    <div class=\"bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1626785774573-4b799315345d?auto=format&fit=crop&w=700&q=80')\"><\/div>\r\n    <div class=\"icon\">\ud83c\udfa8<\/div>\r\n    <h3>Graphic Designing<\/h3>\r\n    <p>Logos, banners, social creatives & branding that make you stand out.<\/p>\r\n    <button class=\"details-btn\" onclick=\"showDetail('graphic-designing')\">See Details \u2192<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"card\">\r\n    <div class=\"bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1533750349088-cd871a92f312?auto=format&fit=crop&w=700&q=80')\"><\/div>\r\n    <div class=\"icon\">\ud83d\udcc8<\/div>\r\n    <h3>Digital Marketing<\/h3>\r\n    <p>Multi-channel campaigns, funnels & ads that actually convert.<\/p>\r\n    <button class=\"details-btn\" onclick=\"showDetail('digital-marketing')\">See Details \u2192<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"card\">\r\n    <div class=\"bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1611162617213-7d7a39e9b1d7?auto=format&fit=crop&w=700&q=80')\"><\/div>\r\n    <div class=\"icon\">\ud83d\udcf1<\/div>\r\n    <h3>Social Media Management<\/h3>\r\n    <p>Content, posting, engagement & growth \u2014 full account handling.<\/p>\r\n    <button class=\"details-btn\" onclick=\"showDetail('social-media-management')\">See Details \u2192<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"card\">\r\n    <div class=\"bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=700&q=80')\"><\/div>\r\n    <div class=\"icon\">\ud83e\udd16<\/div>\r\n    <h3>AI Tools Subscription<\/h3>\r\n    <p>Premium AI tools access at affordable prices \u2014 ChatGPT, Midjourney & more.<\/p>\r\n    <button class=\"details-btn\" onclick=\"showDetail('ai-tools')\">See Details \u2192<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"card\">\r\n    <div class=\"bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1518432031352-d6fc5c10da5a?auto=format&fit=crop&w=700&q=80')\"><\/div>\r\n    <div class=\"icon\">\u2699\ufe0f<\/div>\r\n    <h3>Marketing Tools Subscription<\/h3>\r\n    <p>Top marketing tools at discounted rates \u2014 Canva Pro, SEMrush & more.<\/p>\r\n    <button class=\"details-btn\" onclick=\"showDetail('marketing-tools')\">See Details \u2192<\/button>\r\n  <\/div>\r\n\r\n  <div class=\"card\">\r\n    <div class=\"bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1611926653458-09294b3142bf?auto=format&fit=crop&w=700&q=80')\"><\/div>\r\n    <div class=\"icon\">\u2764\ufe0f<\/div>\r\n    <h3>Social Media Likes \/ Followers<\/h3>\r\n    <p>Real & active likes, followers & views for all social platforms.<\/p>\r\n    <button class=\"details-btn\" onclick=\"showDetail('social-media-likes')\">See Details \u2192<\/button>\r\n  <\/div>\r\n\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     CTA SECTION\r\n============================================================ -->\r\n<section class=\"cta\">\r\n  <h2>Ready to Grow Your Business?<\/h2>\r\n  <p style=\"margin-bottom:20px;\">Get a free consultation with our experts today.<\/p>\r\n  <a href=\"https:\/\/wa.me\/923147857083?text=Hi!%20I%20want%20a%20free%20consultation.\" class=\"btn\" target=\"_blank\" rel=\"noopener nofollow\">Get Free Quote<\/a>\r\n<\/section>\r\n\r\n<!-- ============================================================\r\n     SLIDE-IN DETAIL PANEL\r\n============================================================ -->\r\n<div class=\"detail-overlay\" id=\"detailOverlay\" onclick=\"closeDetail()\"><\/div>\r\n\r\n<div class=\"detail-panel\" id=\"detailPanel\">\r\n  <div class=\"detail-hero\">\r\n    <button class=\"close-btn\" onclick=\"closeDetail()\" title=\"Close\">\u00d7<\/button>\r\n    <h1 id=\"detailTitle\">Service Details<\/h1>\r\n    <p id=\"detailSubtitle\">Complete information about this service<\/p>\r\n  <\/div>\r\n  <div class=\"detail-wrap\" id=\"detailWrap\"><\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/* =====================================================\r\n   SKYSOFT SERVICES \u2014 Complete Data for all 9 services\r\n===================================================== *\/\r\nconst servicesData = {\r\n\r\n  \"website-development\": {\r\n    title: \"Website Development\",\r\n    subtitle: \"Fast, modern aur conversion-focused websites\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1547658719-da2b51169166?auto=format&fit=crop&w=1400&q=85\",\r\n    intro: \"SkySoft Services aapke business ke liye custom, fast aur fully responsive websites banata hai. Landing page se le kar complete business website tak \u2014 har project ko hum modern technology aur best practices ke saath develop karte hain taake aapka business online grow kar sake.\",\r\n    features: [\r\n      \"Custom design \u2014 aapke brand ke mutabiq completely unique\",\r\n      \"Mobile, tablet aur desktop par 100% responsive\",\r\n      \"Fast loading speed (PageSpeed 90+ score)\",\r\n      \"SEO-friendly structure aur clean code\",\r\n      \"Secure hosting setup + free SSL certificate\",\r\n      \"Admin panel se content easily manage karein\",\r\n      \"Google Analytics aur Search Console integration\",\r\n      \"Contact form + WhatsApp chat integration\",\r\n      \"Free maintenance support \u2014 1 mahine tak\",\r\n      \"Unlimited revisions jab tak aap satisfied na hon\"\r\n    ],\r\n    pricing: [\r\n      \"Landing Page (1 page): Starting from PKR 15,000\",\r\n      \"Business Website (5-7 pages): Starting from PKR 35,000\",\r\n      \"E-commerce Store: Starting from PKR 65,000\",\r\n      \"Custom Web App: Custom quote \u2014 WhatsApp par baat karein\"\r\n    ],\r\n    delivery: \"Delivery Time: 5 se 15 working days (project ke size par depend karta hai)\",\r\n    faq: [\r\n      { q: \"Kya aap domain aur hosting bhi provide karte hain?\", a: \"Ji haan, hum domain aur hosting setup bhi karte hain. Aap apna domain le kar aayein ya hum se lein \u2014 dono options available hain.\" },\r\n      { q: \"Website ke baad maintenance ka kya hoga?\", a: \"1 mahine free maintenance include hai. Uske baad monthly maintenance package bhi available hai.\" },\r\n      { q: \"Kya website mobile par bhi achi dikhegi?\", a: \"Bilkul! Har website fully responsive hoti hai \u2014 mobile, tablet aur desktop sab par perfect chalti hai.\" }\r\n    ],\r\n    whatsappText: \"Hi! I am interested in Website Development service. Please share more details.\"\r\n  },\r\n\r\n  \"seo-optimization\": {\r\n    title: \"SEO Optimization\",\r\n    subtitle: \"Google par top ranking aur organic traffic\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1562577309-4932fdd64cd1?auto=format&fit=crop&w=1400&q=85\",\r\n    intro: \"Hamari SEO service aapki website ko Google ke first page par lane ke liye complete optimization karti hai. Technical SEO se le kar content optimization aur backlink building tak \u2014 sab kuch hum handle karte hain. Result: zyada organic traffic aur real customers.\",\r\n    features: [\r\n      \"Complete website SEO audit report\",\r\n      \"On-page optimization (titles, meta tags, headings)\",\r\n      \"Deep keyword research + competitor analysis\",\r\n      \"Technical SEO fixes (site speed, sitemap, robots.txt)\",\r\n      \"High-quality backlink building (white-hat)\",\r\n      \"Local SEO \u2014 Google Maps par ranking\",\r\n      \"Content optimization aur blog strategy\",\r\n      \"Monthly ranking report + Google Analytics\",\r\n      \"Google Search Console setup\",\r\n      \"Regular monitoring aur improvements\"\r\n    ],\r\n    pricing: [\r\n      \"Basic SEO (1 website): Starting from PKR 20,000\/month\",\r\n      \"Standard SEO (with content): Starting from PKR 35,000\/month\",\r\n      \"Premium SEO (competitive niche): Starting from PKR 60,000\/month\",\r\n      \"One-time SEO Audit: PKR 8,000\"\r\n    ],\r\n    delivery: \"Results: 2 se 3 mahine mein visible improvement\",\r\n    faq: [\r\n      { q: \"SEO ke results kitne time mein aate hain?\", a: \"Usually 2 se 3 mahine mein visible improvement dikhti hai. Competitive keywords ke liye 4 se 6 mahine lag sakte hain.\" },\r\n      { q: \"Kya aap white-hat SEO use karte hain?\", a: \"Ji haan, hum 100% white-hat aur Google-approved techniques use karte hain. Koi risky shortcut nahi.\" },\r\n      { q: \"Kya monthly report milegi?\", a: \"Bilkul! Har mahine detailed report milegi jismein rankings, traffic aur improvements sab mention honge.\" }\r\n    ],\r\n    whatsappText: \"Hi! I am interested in SEO Optimization service. Please share more details.\"\r\n  },\r\n\r\n  \"youtube-monetization\": {\r\n    title: \"YouTube Monetization\",\r\n    subtitle: \"Channel monetize karein fast aur easily\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1611162616475-46b635cb6868?auto=format&fit=crop&w=1400&q=85\",\r\n    intro: \"YouTube monetization ke liye complete guidance aur setup. Hum aapko 1000 subscribers aur 4000 watch hours ka target achieve karne mein madad karte hain, ya aapke channel ko monetization ke liye fully prepare karte hain. Aapka channel \u2014 hamari strategy.\",\r\n    features: [\r\n      \"Channel complete audit aur optimization\",\r\n      \"YouTube SEO (titles, tags, descriptions)\",\r\n      \"Professional thumbnail design\",\r\n      \"Channel banner aur logo design\",\r\n      \"Content strategy + video ideas\",\r\n      \"Watch time aur subscriber growth plan\",\r\n      \"Monetization requirements complete guidance\",\r\n      \"Analytics monitoring aur monthly report\",\r\n      \"Competitor channel analysis\",\r\n      \"Community engagement strategy\"\r\n    ],\r\n    pricing: [\r\n      \"Channel Audit + Report: PKR 5,000\",\r\n      \"Basic Growth Plan (1 month): PKR 15,000\",\r\n      \"Complete Monetization Package (3 months): PKR 40,000\",\r\n      \"Custom plan: WhatsApp par baat karein\"\r\n    ],\r\n    delivery: \"Guidance: 1 se 3 mahine ka growth plan\",\r\n    faq: [\r\n      { q: \"Kya aap subscribers aur views bikte hain?\", a: \"Nahi, hum 100% organic growth par kaam karte hain. Fake subscribers ya views se channel ko nuqsan hota hai.\" },\r\n      { q: \"Monetization mein kitna time lagta hai?\", a: \"Agar aap already 500+ subscribers hain to 1-2 mahine mein monetization possible hai. Zero se start karne par 3-6 mahine.\" },\r\n      { q: \"Kya aap content bhi banate hain?\", a: \"Hum content strategy, script aur guidance dete hain. Video production aap khud karte hain ya hum se alag service le sakte hain.\" }\r\n    ],\r\n    whatsappText: \"Hi! I am interested in YouTube Monetization service. Please share more details.\"\r\n  },\r\n\r\n  \"graphic-designing\": {\r\n    title: \"Graphic Designing\",\r\n    subtitle: \"Professional designs aapke brand ke liye\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1626785774573-4b799315345d?auto=format&fit=crop&w=1400&q=85\",\r\n    intro: \"Logos, banners, social media creatives aur branding \u2014 hum aapke brand ke liye eye-catching designs banate hain jo aapko competitors se alag aur professional dikhate hain. Har design aapke brand identity ke mutabiq customize kiya jata hai.\",\r\n    features: [\r\n      \"Custom logo design (3+ concepts)\",\r\n      \"Social media posts aur story designs\",\r\n      \"Facebook\/Instagram ad creatives\",\r\n      \"Banner, flyer aur brochure design\",\r\n      \"Business card aur letterhead design\",\r\n      \"YouTube thumbnail design\",\r\n      \"Complete brand identity kit\",\r\n      \"Packaging design\",\r\n      \"Presentation (PPT) design\",\r\n      \"Unlimited revisions till satisfaction\"\r\n    ],\r\n    pricing: [\r\n      \"Logo Design: Starting from PKR 5,000\",\r\n      \"Social Media Pack (15 posts): PKR 8,000\",\r\n      \"Complete Branding Kit: Starting from PKR 25,000\",\r\n      \"YouTube Thumbnails (10): PKR 5,000\"\r\n    ],\r\n    delivery: \"Delivery: 2 se 5 working days\",\r\n    faq: [\r\n      { q: \"Kya source files milengi?\", a: \"Ji haan, final delivery ke saath saari source files (AI, PSD, etc.) bhi milengi.\" },\r\n      { q: \"Revisions kitni hain?\", a: \"Har design mein unlimited revisions hain jab tak aap 100% satisfied na hon.\" },\r\n      { q: \"Kya urgent delivery possible hai?\", a: \"Ji haan, urgent delivery available hai \u2014 extra charges ke saath. WhatsApp par baat karein.\" }\r\n    ],\r\n    whatsappText: \"Hi! I am interested in Graphic Designing service. Please share more details.\"\r\n  },\r\n\r\n  \"digital-marketing\": {\r\n    title: \"Digital Marketing\",\r\n    subtitle: \"Multi-channel campaigns jo convert karein\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1533750349088-cd871a92f312?auto=format&fit=crop&w=1400&q=85\",\r\n    intro: \"Complete digital marketing solutions \u2014 Facebook ads, Google ads, email marketing aur funnels. Hum aapke business ke liye result-driven campaigns banate hain jo real customers laate hain, sirf clicks nahi. Har campaign data par based hoti hai.\",\r\n    features: [\r\n      \"Facebook & Instagram ads management\",\r\n      \"Google Ads (Search, Display, YouTube)\",\r\n      \"Sales funnel design + setup\",\r\n      \"Email marketing campaigns\",\r\n      \"Landing page design aur optimization\",\r\n      \"Conversion tracking + Facebook Pixel setup\",\r\n      \"Audience research aur targeting\",\r\n      \"A\/B testing for better results\",\r\n      \"Weekly performance reports\",\r\n      \"ROI-focused strategy\"\r\n    ],\r\n    pricing: [\r\n      \"Single Platform Ads (1 month): Starting from PKR 25,000\",\r\n      \"Multi-Platform Campaign: Starting from PKR 45,000\",\r\n      \"Complete Funnel + Ads: Starting from PKR 70,000\",\r\n      \"Ad budget alag hoga (Facebook\/Google ko dena hoga)\"\r\n    ],\r\n    delivery: \"Campaign setup: 3 se 7 working days\",\r\n    faq: [\r\n      { q: \"Ad budget alag hota hai?\", a: \"Ji haan, ad budget (jo Facebook\/Google ko jata hai) alag hota hai. Hamari service fee management ki hoti hai.\" },\r\n      { q: \"Minimum kitna ad budget chahiye?\", a: \"Kam az kam PKR 15,000\/month ka ad budget recommend karte hain better results ke liye.\" },\r\n      { q: \"Kya results guarantee hain?\", a: \"Hum best strategy aur optimization karte hain, lekin ad results market, product aur competition par depend karte hain. Hum transparent reporting dete hain.\" }\r\n    ],\r\n    whatsappText: \"Hi! I am interested in Digital Marketing service. Please share more details.\"\r\n  },\r\n\r\n  \"social-media-management\": {\r\n    title: \"Social Media Management\",\r\n    subtitle: \"Aapke social accounts ka complete handling\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1611162617213-7d7a39e9b1d7?auto=format&fit=crop&w=1400&q=85\",\r\n    intro: \"Aapke social media accounts ko hum professionally manage karte hain \u2014 daily posting, engagement, growth aur analytics. Aap business par focus karein, social media hum sambhal lete hain. Complete peace of mind ke saath.\",\r\n    features: [\r\n      \"Monthly content calendar (pre-approved)\",\r\n      \"Daily\/weekly posting on all platforms\",\r\n      \"Engaging captions aur trending hashtags\",\r\n      \"Comment aur DM reply management\",\r\n      \"Follower growth strategy (organic)\",\r\n      \"Competitor analysis aur monitoring\",\r\n      \"Monthly analytics + growth report\",\r\n      \"Custom graphics for each post\",\r\n      \"Story aur reel creation\",\r\n      \"Profile optimization\"\r\n    ],\r\n    pricing: [\r\n      \"Basic Package (1 platform, 12 posts\/month): PKR 15,000\",\r\n      \"Standard Package (2 platforms, 20 posts\/month): PKR 25,000\",\r\n      \"Premium Package (3+ platforms, daily posts): PKR 40,000\",\r\n      \"Custom package available on request\"\r\n    ],\r\n    delivery: \"Service: Monthly package available\",\r\n    faq: [\r\n      { q: \"Kaunse platforms handle karte hain?\", a: \"Facebook, Instagram, TikTok, LinkedIn, Twitter (X) aur YouTube \u2014 sab major platforms.\" },\r\n      { q: \"Content kaun banata hai?\", a: \"Hum content calendar banate hain, aap approve karte hain, phir hum design aur post karte hain.\" },\r\n      { q: \"Kya ads bhi manage karte hain?\", a: \"Social media management mein organic posting hai. Ads ke liye alag Digital Marketing service hai.\" }\r\n    ],\r\n    whatsappText: \"Hi! I am interested in Social Media Management service. Please share more details.\"\r\n  },\r\n\r\n  \"ai-tools\": {\r\n    title: \"AI Tools Subscription\",\r\n    subtitle: \"Premium AI tools sasti qeemat par\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1400&q=85\",\r\n    intro: \"ChatGPT Plus, Midjourney, Claude, Gemini aur doosre premium AI tools ka access aapko affordable price par provide karte hain. Direct subscription ke bajaye hum se lein aur paise bachayein. Instant activation ke saath.\",\r\n    features: [\r\n      \"ChatGPT Plus subscription (GPT-4 access)\",\r\n      \"Midjourney (AI image generation)\",\r\n      \"Claude Pro aur Gemini Advanced\",\r\n      \"Canva Pro with AI features\",\r\n      \"ElevenLabs (AI voice generation)\",\r\n      \"Runway ML (AI video tools)\",\r\n      \"Complete setup aur guidance\",\r\n      \"24\/7 support for any issue\",\r\n      \"Instant activation (24 hours)\",\r\n      \"Money-back guarantee agar kaam na kare\"\r\n    ],\r\n    pricing: [\r\n      \"ChatGPT Plus (1 month): PKR 3,500\",\r\n      \"Midjourney (1 month): PKR 3,000\",\r\n      \"Canva Pro (1 year): PKR 2,500\",\r\n      \"Complete AI Bundle (5+ tools): PKR 10,000\",\r\n      \"Long-term plans par extra discount\"\r\n    ],\r\n    delivery: \"Activation: 24 hours ke andar\",\r\n    faq: [\r\n      { q: \"Kya ye legal hai?\", a: \"Ji haan, hum shared\/team subscriptions ka legitimate access provide karte hain jo fully legal hain.\" },\r\n      { q: \"Kya account band ho sakta hai?\", a: \"Nahi, hum trusted sources se subscriptions dete hain. Agar koi issue aaye to replacement guarantee hai.\" },\r\n      { q: \"Payment kaise karein?\", a: \"Easypaisa, JazzCash, bank transfer ya crypto \u2014 jo aapke liye convenient ho.\" }\r\n    ],\r\n    whatsappText: \"Hi! I am interested in AI Tools Subscription service. Please share more details.\"\r\n  },\r\n\r\n  \"marketing-tools\": {\r\n    title: \"Marketing Tools Subscription\",\r\n    subtitle: \"Top marketing tools discounted rates par\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1518432031352-d6fc5c10da5a?auto=format&fit=crop&w=1400&q=85\",\r\n    intro: \"SEMrush, Ahrefs, Canva Pro, Grammarly aur doosre top marketing tools ka premium access aapko discounted price par milta hai. Business ke liye zaroori tools, ab sasti qeemat par. Professional growth ke liye best investment.\",\r\n    features: [\r\n      \"Canva Pro subscription (design tool)\",\r\n      \"SEMrush \/ Ahrefs (SEO tools)\",\r\n      \"Grammarly Premium (writing)\",\r\n      \"Adobe Creative Cloud tools\",\r\n      \"Hootsuite \/ Buffer (social media)\",\r\n      \"Mailchimp \/ ConvertKit (email)\",\r\n      \"Notion \/ Trello Pro (productivity)\",\r\n      \"Full setup aur basic training\",\r\n      \"24\/7 support\",\r\n      \"Long-term discounts\"\r\n    ],\r\n    pricing: [\r\n      \"Canva Pro (1 year): PKR 2,500\",\r\n      \"SEMrush \/ Ahrefs (1 month): PKR 4,000\",\r\n      \"Grammarly Premium (1 year): PKR 3,000\",\r\n      \"Complete Marketing Bundle: PKR 12,000\",\r\n      \"Custom bundle available\"\r\n    ],\r\n    delivery: \"Activation: 24 se 48 hours\",\r\n    faq: [\r\n      { q: \"Kya tools original hain?\", a: \"Ji haan, 100% original subscriptions. Hum official channels se lete hain.\" },\r\n      { q: \"Kya main apna account use kar sakta hoon?\", a: \"Kuch tools mein aap apna account use kar sakte hain, kuch mein shared access milega. Detail WhatsApp par.\" },\r\n      { q: \"Renewal ka kya process hai?\", a: \"Expiry se pehle hum remind karte hain. Aap renew karwa sakte hain easily.\" }\r\n    ],\r\n    whatsappText: \"Hi! I am interested in Marketing Tools Subscription service. Please share more details.\"\r\n  },\r\n\r\n  \"social-media-likes\": {\r\n    title: \"Social Media Likes \/ Followers\",\r\n    subtitle: \"Real aur active growth aapke accounts par\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1611926653458-09294b3142bf?auto=format&fit=crop&w=1400&q=85\",\r\n    intro: \"Instagram, Facebook, TikTok, YouTube aur Twitter par real aur active likes, followers aur views provide karte hain. Aapki social media presence ko fast grow karne ke liye best service. 100% safe aur guarantee ke saath.\",\r\n    features: [\r\n      \"Instagram likes, followers & views\",\r\n      \"Facebook page likes + post engagement\",\r\n      \"TikTok followers aur video views\",\r\n      \"YouTube subscribers, likes & watch hours\",\r\n      \"Twitter (X) followers aur retweets\",\r\n      \"100% real aur active accounts\",\r\n      \"Fast delivery (instant start)\",\r\n      \"No password required \u2014 safe process\",\r\n      \"Refill guarantee agar drop ho\",\r\n      \"24\/7 customer support\"\r\n    ],\r\n    pricing: [\r\n      \"Instagram 1000 Followers: PKR 1,500\",\r\n      \"Instagram 1000 Likes: PKR 300\",\r\n      \"Facebook 1000 Page Likes: PKR 2,000\",\r\n      \"YouTube 1000 Subscribers: PKR 5,000\",\r\n      \"TikTok 1000 Followers: PKR 1,200\",\r\n      \"Custom packages available\"\r\n    ],\r\n    delivery: \"Delivery: 1 se 24 hours mein start\",\r\n    faq: [\r\n      { q: \"Kya followers real hain?\", a: \"Ji haan, hum high-quality real-looking accounts use karte hain. Bots nahi.\" },\r\n      { q: \"Kya account ban ho sakta hai?\", a: \"Nahi, hum 100% safe method use karte hain. Aaj tak kisi customer ka account ban nahi hua.\" },\r\n      { q: \"Kya password dena parega?\", a: \"Bilkul nahi! Sirf username ya post link chahiye. Password ki zaroorat nahi.\" }\r\n    ],\r\n    whatsappText: \"Hi! I am interested in Social Media Likes\/Folllowers service. Please share more details.\"\r\n  }\r\n};\r\n\r\n\/* =====================================================\r\n   SLIDER \u2014 Saari 9 services ki slides\r\n===================================================== *\/\r\nconst sliderData = [\r\n  {\r\n    key: \"website-development\",\r\n    tag: \"Service 01\",\r\n    title: \"Website Development\",\r\n    desc: \"Custom websites \u2014 fast, secure & fully responsive.\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1547658719-da2b51169166?auto=format&fit=crop&w=1600&q=85\"\r\n  },\r\n  {\r\n    key: \"seo-optimization\",\r\n    tag: \"Service 02\",\r\n    title: \"SEO Optimization\",\r\n    desc: \"Rank higher on Google and bring organic traffic.\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1562577309-4932fdd64cd1?auto=format&fit=crop&w=1600&q=85\"\r\n  },\r\n  {\r\n    key: \"youtube-monetization\",\r\n    tag: \"Service 03\",\r\n    title: \"YouTube Monetization\",\r\n    desc: \"Complete setup & guidance to monetize your channel.\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1611162616475-46b635cb6868?auto=format&fit=crop&w=1600&q=85\"\r\n  },\r\n  {\r\n    key: \"graphic-designing\",\r\n    tag: \"Service 04\",\r\n    title: \"Graphic Designing\",\r\n    desc: \"Logos, banners & branding that stand out.\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1626785774573-4b799315345d?auto=format&fit=crop&w=1600&q=85\"\r\n  },\r\n  {\r\n    key: \"digital-marketing\",\r\n    tag: \"Service 05\",\r\n    title: \"Digital Marketing\",\r\n    desc: \"Multi-channel campaigns that actually convert.\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1533750349088-cd871a92f312?auto=format&fit=crop&w=1600&q=85\"\r\n  },\r\n  {\r\n    key: \"social-media-management\",\r\n    tag: \"Service 06\",\r\n    title: \"Social Media Management\",\r\n    desc: \"Content, posting, engagement & full account handling.\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1611162617213-7d7a39e9b1d7?auto=format&fit=crop&w=1600&q=85\"\r\n  },\r\n  {\r\n    key: \"ai-tools\",\r\n    tag: \"Service 07\",\r\n    title: \"AI Tools Subscription\",\r\n    desc: \"Premium AI tools at affordable prices.\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1677442136019-21780ecad995?auto=format&fit=crop&w=1600&q=85\"\r\n  },\r\n  {\r\n    key: \"marketing-tools\",\r\n    tag: \"Service 08\",\r\n    title: \"Marketing Tools Subscription\",\r\n    desc: \"Top marketing tools at discounted rates.\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1518432031352-d6fc5c10da5a?auto=format&fit=crop&w=1600&q=85\"\r\n  },\r\n  {\r\n    key: \"social-media-likes\",\r\n    tag: \"Service 09\",\r\n    title: \"Social Media Likes \/ Followers\",\r\n    desc: \"Real & active likes, followers & views.\",\r\n    image: \"https:\/\/images.unsplash.com\/photo-1611926653458-09294b3142bf?auto=format&fit=crop&w=1600&q=85\"\r\n  }\r\n];\r\n\r\nlet currentSlide = 0;\r\nlet slideInterval;\r\n\r\nfunction buildSlider() {\r\n  const container = document.getElementById(\"sliderContainer\");\r\n  const dotsContainer = document.getElementById(\"sliderDots\");\r\n\r\n  \/\/ Insert slides before arrows\r\n  const prevBtn = container.querySelector(\".prev\");\r\n\r\n  sliderData.forEach((s, i) => {\r\n    const slide = document.createElement(\"div\");\r\n    slide.className = \"slide\" + (i === 0 ? \" active\" : \"\");\r\n    slide.style.backgroundImage = `url('${s.image}')`;\r\n    slide.innerHTML = `\r\n      <div class=\"slide-content\">\r\n        <span class=\"slide-tag\">${s.tag}<\/span>\r\n        <h3>${s.title}<\/h3>\r\n        <p>${s.desc}<\/p>\r\n      <\/div>\r\n    `;\r\n    slide.style.cursor = \"pointer\";\r\n    slide.onclick = (e) => {\r\n      if (!e.target.closest(\".slider-arrow\") && !e.target.closest(\".slider-dots\")) {\r\n        showDetail(s.key);\r\n      }\r\n    };\r\n    container.insertBefore(slide, prevBtn);\r\n  });\r\n\r\n  \/\/ Build dots\r\n  sliderData.forEach((_, i) => {\r\n    const dot = document.createElement(\"button\");\r\n    if (i === 0) dot.classList.add(\"active\");\r\n    dot.onclick = () => goToSlide(i);\r\n    dotsContainer.appendChild(dot);\r\n  });\r\n\r\n  startAutoSlide();\r\n}\r\n\r\nfunction goToSlide(index) {\r\n  const slides = document.querySelectorAll(\".slide\");\r\n  const dots = document.querySelectorAll(\".slider-dots button\");\r\n\r\n  if (!slides.length) return;\r\n\r\n  slides[currentSlide].classList.remove(\"active\");\r\n  dots[currentSlide].classList.remove(\"active\");\r\n\r\n  currentSlide = (index + slides.length) % slides.length;\r\n\r\n  slides[currentSlide].classList.add(\"active\");\r\n  dots[currentSlide].classList.add(\"active\");\r\n}\r\n\r\nfunction changeSlide(dir) {\r\n  goToSlide(currentSlide + dir);\r\n  resetAutoSlide();\r\n}\r\n\r\nfunction startAutoSlide() {\r\n  slideInterval = setInterval(() => {\r\n    goToSlide(currentSlide + 1);\r\n  }, 4500);\r\n}\r\n\r\nfunction resetAutoSlide() {\r\n  clearInterval(slideInterval);\r\n  startAutoSlide();\r\n}\r\n\r\n\/* =====================================================\r\n   SHOW DETAIL \u2014 Slide in panel\r\n===================================================== *\/\r\nfunction showDetail(serviceKey) {\r\n  const service = servicesData[serviceKey];\r\n  if (!service) return;\r\n\r\n  const panel = document.getElementById(\"detailPanel\");\r\n  const overlay = document.getElementById(\"detailOverlay\");\r\n  const detailWrap = document.getElementById(\"detailWrap\");\r\n  const detailTitle = document.getElementById(\"detailTitle\");\r\n  const detailSubtitle = document.getElementById(\"detailSubtitle\");\r\n\r\n  detailTitle.textContent = service.title;\r\n  detailSubtitle.textContent = service.subtitle;\r\n\r\n  const waLink = \"https:\/\/wa.me\/923147857083?text=\" + encodeURIComponent(service.whatsappText);\r\n\r\n  const faqHTML = service.faq.map(item => `\r\n    <div class=\"faq-item\">\r\n      <h4>Q: ${item.q}<\/h4>\r\n      <p>A: ${item.a}<\/p>\r\n    <\/div>\r\n  `).join(\"\");\r\n\r\n  const pricingHTML = service.pricing.map(p => `<p>\u2022 ${p}<\/p>`).join(\"\");\r\n\r\n  detailWrap.innerHTML = `\r\n    <div class=\"detail-img\" style=\"background-image:url('${service.image}')\"><\/div>\r\n\r\n    <h2>${service.title}<\/h2>\r\n    <p class=\"intro\">${service.intro}<\/p>\r\n\r\n    <h3>Kya Kya Milta Hai:<\/h3>\r\n    <ul class=\"feature-list\">\r\n      ${service.features.map(f => `<li>${f}<\/li>`).join(\"\")}\r\n    <\/ul>\r\n\r\n    <h3>Pricing \/ Packages:<\/h3>\r\n    <div class=\"pricing-box\">\r\n      ${pricingHTML}\r\n      <p style=\"margin-top:12px; font-size:13px; color:#666;\">\r\n        <strong>Note:<\/strong> Prices approximate hain. Exact quote ke liye WhatsApp par baat karein.\r\n      <\/p>\r\n    <\/div>\r\n\r\n    <h3>Delivery \/ Timeline:<\/h3>\r\n    <p style=\"font-size:15px; color:#333; font-weight:600;\">${service.delivery}<\/p>\r\n\r\n    <h3>Frequently Asked Questions:<\/h3>\r\n    ${faqHTML}\r\n\r\n    <a class=\"contact-now\" href=\"${waLink}\" target=\"_blank\" rel=\"noopener\">\r\n      <svg viewBox=\"0 0 24 24\"><path d=\"M17.47 14.38c-.3-.15-1.75-.86-2.02-.96-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.26-.46-2.4-1.48-.89-.79-1.49-1.77-1.66-2.07-.17-.3-.02-.46.13-.61.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.07-.15-.67-1.6-.92-2.19-.24-.58-.48-.5-.67-.51h-.57c-.2 0-.52.07-.79.37-.27.3-1.04 1.02-1.04 2.48s1.06 2.88 1.21 3.08c.15.2 2.1 3.2 5.08 4.49.71.31 1.26.49 1.69.62.71.23 1.36.2 1.87.12.57-.09 1.75-.72 2-1.41.25-.69.25-1.28.17-1.41-.07-.13-.27-.2-.57-.35z\"\/><path d=\"M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.46 1.32 4.96L2 22l5.25-1.38c1.45.79 3.08 1.21 4.79 1.21 5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15c-1.56 0-3.09-.42-4.43-1.21l-.32-.19-3.11.82.83-3.04-.21-.33a8.16 8.16 0 0 1-1.25-4.36c0-4.54 3.7-8.23 8.24-8.23s8.23 3.69 8.23 8.23-3.69 8.31-8.23 8.31z\"\/><\/svg>\r\n      Contact Now on WhatsApp\r\n    <\/a>\r\n  `;\r\n\r\n  panel.scrollTop = 0;\r\n  overlay.classList.add(\"active\");\r\n  panel.classList.add(\"active\");\r\n  document.body.style.overflow = \"hidden\";\r\n}\r\n\r\n\/* =====================================================\r\n   CLOSE DETAIL\r\n===================================================== *\/\r\nfunction closeDetail() {\r\n  const panel = document.getElementById(\"detailPanel\");\r\n  const overlay = document.getElementById(\"detailOverlay\");\r\n\r\n  panel.classList.remove(\"active\");\r\n  overlay.classList.remove(\"active\");\r\n  document.body.style.overflow = \"\";\r\n}\r\n\r\n\/* ESC key *\/\r\ndocument.addEventListener(\"keydown\", function(e) {\r\n  if (e.key === \"Escape\") closeDetail();\r\n});\r\n\r\n\/* Initialize slider on page load *\/\r\nwindow.addEventListener(\"load\", buildSlider);\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>SkySoft Services \u2014 Our Services Our Services SkySoft Services provides top-notch digital solutions to grow your business online. Explore Services [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_thinkrank_schema_form_data":"","_thinkrank_selected_schema_type":"","_thinkrank_additional_schemas":"","_thinkrank_canonical_url":"","_thinkrank_og_title":"","_thinkrank_og_description":"","_thinkrank_og_image":"","_thinkrank_twitter_title":"","_thinkrank_twitter_description":"","_thinkrank_twitter_image":"","_thinkrank_imported_from":"","_thinkrank_focus_keywords":[],"_thinkrank_focus_keyword":"","_thinkrank_robots_meta_enabled":0,"_thinkrank_robots_meta":"","_thinkrank_advanced_robots_meta":"","_thinkrank_exclude_from_search":0,"_thinkrank_exclude_from_archives":0,"_thinkrank_primary_category":0,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_xspeed_no_cache":false,"_xspeed_expiry_hours":0,"footnotes":""},"class_list":["post-24","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages\/24","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24"}],"version-history":[{"count":10,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions"}],"predecessor-version":[{"id":268,"href":"https:\/\/skysoftservices.com\/index.php?rest_route=\/wp\/v2\/pages\/24\/revisions\/268"}],"wp:attachment":[{"href":"https:\/\/skysoftservices.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}