{"id":120,"date":"2025-11-16T12:40:20","date_gmt":"2025-11-16T12:40:20","guid":{"rendered":"https:\/\/ultsol.cloud\/?page_id=120"},"modified":"2026-01-08T14:04:42","modified_gmt":"2026-01-08T14:04:42","slug":"home","status":"publish","type":"page","link":"https:\/\/ultsol.cloud\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"120\" class=\"elementor elementor-120\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dc17dec e-con-full e-flex e-con e-parent\" data-id=\"dc17dec\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;none&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b509c9 elementor-widget elementor-widget-html\" data-id=\"4b509c9\" data-element_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>Ultimate Solutions - Home<\/title>\r\n    <!-- SweetAlert2 -->\r\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\r\n    <!-- Font Awesome -->\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\">\r\n    <!-- Google Fonts -->\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n       \r\n        .services {\r\n            padding: 60px 0;\r\n            background: white;\r\n        }\r\n\r\n        .section-title {\r\n            text-align: center;\r\n            margin-bottom: 40px;\r\n        }\r\n\r\n        .section-title h2 {\r\n            font-size: 2rem;\r\n            color: #0078d7;\r\n            position: relative;\r\n            display: inline-block;\r\n            margin-bottom: 15px;\r\n        }\r\n\r\n        .section-title h2::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -10px;\r\n            left: 50%;\r\n            transform: translateX(-50%);\r\n            width: 80px;\r\n            height: 4px;\r\n            background: linear-gradient(90deg, #0078d7, #00b7ff);\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .section-title p {\r\n            max-width: 700px;\r\n            margin: 0 auto;\r\n            color: #666;\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .services-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n            gap: 25px;\r\n        }\r\n\r\n        .service-card {\r\n            background: transparent;\r\n            border-radius: 15px;\r\n            padding: 30px 25px;\r\n            transition: all 0.4s ease;\r\n            text-align: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n            border-top: 4px solid #0078d7;\r\n            width: 100%;\r\n        }\r\n\r\n        .service-card:hover {\r\n            transform: translateY(-10px);\r\n            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        .service-icon {\r\n            font-size: 2.8rem;\r\n            color: #0078d7;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .service-card h3 {\r\n            font-size: 1.3rem;\r\n            color: #0078d7;\r\n            margin-bottom: 15px;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .service-card p {\r\n            color: #555;\r\n            font-size: 1rem;\r\n            line-height: 1.6;\r\n            position: relative;\r\n            z-index: 1;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .service-link {\r\n            display: inline-block;\r\n            color: #0078d7;\r\n            font-weight: 500;\r\n            transition: all 0.3s ease;\r\n            text-decoration: none;\r\n        }\r\n\r\n        .service-link:hover {\r\n            color: #005a9e;\r\n            transform: translateX(5px);\r\n        }\r\n\r\n        \/* About Section *\/\r\n        .about {\r\n            padding: 60px 0;\r\n            background: transparent;\r\n        }\r\n\r\n        .about-content {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            align-items: center;\r\n            gap: 40px;\r\n        }\r\n\r\n        .about-text {\r\n            flex: 1 1 500px;\r\n        }\r\n\r\n        .about-image {\r\n            flex: 1 1 500px;\r\n            border-radius: 15px;\r\n            overflow: hidden;\r\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n            animation: float 3s ease-in-out infinite;\r\n        }\r\n\r\n        .about-image img {\r\n            width: 100%;\r\n            height: auto;\r\n            display: block;\r\n            transition: transform 0.5s ease;\r\n        }\r\n\r\n        .about-image:hover img {\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        .about h2 {\r\n            font-size: 1.8rem;\r\n            color: #0078d7;\r\n            margin-bottom: 20px;\r\n            position: relative;\r\n            display: inline-block;\r\n        }\r\n\r\n        .about h2::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -8px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: linear-gradient(90deg, #0078d7, transparent);\r\n            border-radius: 3px;\r\n        }\r\n\r\n        .about p {\r\n            font-size: 1rem;\r\n            color: #555;\r\n            line-height: 1.7;\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        \/* Mission \/ Vision Section *\/\r\n        .mission-vision {\r\n            padding: 60px 0;\r\n            background: white;\r\n        }\r\n\r\n        .mission-vision-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n            gap: 25px;\r\n        }\r\n\r\n        .card {\r\n            background: transparent;\r\n            border-radius: 15px;\r\n            padding: 30px 25px;\r\n            transition: all 0.4s ease;\r\n            text-align: center;\r\n            position: relative;\r\n            overflow: hidden;\r\n            border-top: 4px solid #0078d7;\r\n            width: 100%;\r\n        }\r\n\r\n        .card:hover {\r\n            transform: translateY(-8px);\r\n            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        .card h3 {\r\n            font-size: 1.4rem;\r\n            color: #0078d7;\r\n            margin-bottom: 15px;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        .card p {\r\n            color: #555;\r\n            font-size: 1rem;\r\n            line-height: 1.6;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* Team Section *\/\r\n        .team {\r\n            padding: 60px 0;\r\n            background: #f8fafc;\r\n        }\r\n\r\n        .team h2 {\r\n            font-size: 1.8rem;\r\n            color: #0078d7;\r\n            margin-bottom: 30px;\r\n            position: relative;\r\n            display: inline-block;\r\n        }\r\n\r\n        .team h2::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -10px;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 3px;\r\n            background: linear-gradient(90deg, #0078d7, transparent);\r\n        }\r\n\r\n        .team-grid {\r\n            display: grid;\r\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n            gap: 25px;\r\n        }\r\n\r\n        .team-member {\r\n            background: #fff;\r\n            padding: 25px 20px;\r\n            border-radius: 15px;\r\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);\r\n            transition: all 0.4s ease;\r\n            position: relative;\r\n            overflow: hidden;\r\n            text-align: center;\r\n            width: 100%;\r\n        }\r\n\r\n        .team-member::before {\r\n            content: '';\r\n            position: absolute;\r\n            top: 0;\r\n            left: 0;\r\n            width: 100%;\r\n            height: 5px;\r\n            background: linear-gradient(90deg, #0078d7, #00b7ff);\r\n        }\r\n\r\n        .team-member:hover {\r\n            transform: translateY(-8px);\r\n            box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        .team-member img {\r\n            width: 120px;\r\n            height: 120px;\r\n            border-radius: 50%;\r\n            margin-bottom: 15px;\r\n            object-fit: cover;\r\n            border: 4px solid #f0f7ff;\r\n            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);\r\n            transition: all 0.3s ease;\r\n        }\r\n\r\n        .team-member:hover img {\r\n            border-color: #0078d7;\r\n            transform: scale(1.05);\r\n        }\r\n\r\n        .team-member h4 {\r\n            margin: 15px 0 8px;\r\n            font-size: 1.2rem;\r\n            color: #0078d7;\r\n            font-weight: 600;\r\n        }\r\n\r\n        .team-member p {\r\n            font-size: 0.95rem;\r\n            color: #666;\r\n            margin: 0;\r\n        }\r\n\r\n        \/* Contact Section *\/\r\n        .contact {\r\n            padding: 60px 0;\r\n            background: white;\r\n        }\r\n\r\n        .contact-container {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 30px;\r\n        }\r\n\r\n        .contact-form, .contact-info {\r\n            flex: 1 1 400px;\r\n            background: #fff;\r\n            padding: 30px 25px;\r\n            border-radius: 15px;\r\n            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);\r\n            transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n        }\r\n\r\n        .contact-form:hover, .contact-info:hover {\r\n            transform: translateY(-8px);\r\n            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\r\n        }\r\n\r\n        .form-group {\r\n            margin-bottom: 20px;\r\n        }\r\n\r\n        .contact-form input, .contact-form textarea {\r\n            width: 100%;\r\n            padding: 14px 18px;\r\n            border-radius: 10px;\r\n            border: 1px solid #ddd;\r\n            font-size: 0.95rem;\r\n            transition: all 0.3s;\r\n            font-family: \"Poppins\", sans-serif;\r\n            box-sizing: border-box;\r\n        }\r\n\r\n        .contact-form input:focus, .contact-form textarea:focus {\r\n            border-color: #0078d7;\r\n            box-shadow: 0 0 0 3px rgba(0, 120, 215, 0.2);\r\n            outline: none;\r\n        }\r\n\r\n        .contact-form label {\r\n            display: block;\r\n            margin-bottom: 8px;\r\n            font-weight: 500;\r\n            color: #555;\r\n        }\r\n\r\n        .contact-form button {\r\n            background: linear-gradient(135deg, #0078d7 0%, #005fa3 100%);\r\n            color: #fff;\r\n            border: none;\r\n            padding: 14px 30px;\r\n            font-size: 1rem;\r\n            border-radius: 10px;\r\n            cursor: pointer;\r\n            transition: all 0.3s ease;\r\n            font-weight: 600;\r\n            letter-spacing: 0.5px;\r\n            display: block;\r\n            width: 100%;\r\n            box-shadow: 0 4px 10px rgba(0, 120, 215, 0.3);\r\n        }\r\n\r\n        .contact-form button:hover {\r\n            background: linear-gradient(135deg, #005fa3 0%, #004a82 100%);\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 6px 15px rgba(0, 120, 215, 0.4);\r\n        }\r\n\r\n        .contact-info h3 {\r\n            font-size: 1.3rem;\r\n            margin-bottom: 15px;\r\n            color: #0078d7;\r\n            position: relative;\r\n            padding-bottom: 10px;\r\n        }\r\n\r\n        .contact-info h3:after {\r\n            content: '';\r\n            position: absolute;\r\n            left: 0;\r\n            bottom: 0;\r\n            width: 40px;\r\n            height: 3px;\r\n            background: #0078d7;\r\n            border-radius: 2px;\r\n        }\r\n\r\n        .contact-info p {\r\n            font-size: 0.95rem;\r\n            margin-bottom: 12px;\r\n            color: #555;\r\n        }\r\n\r\n        .map {\r\n            margin-top: 25px;\r\n            border-radius: 15px;\r\n            overflow: hidden;\r\n            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n        }\r\n\r\n        .social-links {\r\n            display: flex;\r\n            gap: 12px;\r\n            margin-top: 20px;\r\n            justify-content: center;\r\n        }\r\n\r\n        .social-links a {\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            width: 38px;\r\n            height: 38px;\r\n            border-radius: 50%;\r\n            background: #f0f0f0;\r\n            color: #0078d7;\r\n            text-decoration: none;\r\n            transition: all 0.3s ease;\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .social-links a:hover {\r\n            background: #0078d7;\r\n            color: white;\r\n            transform: translateY(-3px);\r\n        }\r\n\r\n        \/* Animations *\/\r\n        @keyframes fadeInUp {\r\n            from {\r\n                opacity: 0;\r\n                transform: translateY(30px);\r\n            }\r\n            to {\r\n                opacity: 1;\r\n                transform: translateY(0);\r\n            }\r\n        }\r\n\r\n        @keyframes float {\r\n            0% {\r\n                transform: translateY(0px);\r\n            }\r\n            50% {\r\n                transform: translateY(-10px);\r\n            }\r\n            100% {\r\n                transform: translateY(0px);\r\n            }\r\n        }\r\n\r\n        \/* Mobile Navigation (if needed later) *\/\r\n        .mobile-menu-btn {\r\n            display: none;\r\n            background: none;\r\n            border: none;\r\n            font-size: 1.5rem;\r\n            color: #0078d7;\r\n            cursor: pointer;\r\n        }\r\n\r\n        \/* Responsive Styles *\/\r\n        @media (max-width: 768px) {\r\n            .container {\r\n                padding: 0 15px;\r\n            }\r\n            \r\n            .services, .about, .mission-vision, .team, .contact {\r\n                padding: 50px 0;\r\n            }\r\n            \r\n            .section-title h2 {\r\n                font-size: 1.8rem;\r\n            }\r\n            \r\n            .section-title p {\r\n                font-size: 0.95rem;\r\n            }\r\n            \r\n            .services-grid,\r\n            .mission-vision-grid,\r\n            .team-grid {\r\n                grid-template-columns: 1fr;\r\n                gap: 20px;\r\n            }\r\n            \r\n            .service-card, .card {\r\n                padding: 25px 20px;\r\n            }\r\n            \r\n            .service-icon {\r\n                font-size: 2.5rem;\r\n            }\r\n            \r\n            .about h2, .team h2 {\r\n                font-size: 1.6rem;\r\n            }\r\n            \r\n            .about p {\r\n                font-size: 0.95rem;\r\n            }\r\n            \r\n            .contact-form, .contact-info {\r\n                padding: 25px 20px;\r\n            }\r\n            \r\n            .contact-form input, .contact-form textarea {\r\n                padding: 12px 15px;\r\n                font-size: 0.9rem;\r\n            }\r\n            \r\n            .contact-form button {\r\n                padding: 12px 25px;\r\n                font-size: 0.95rem;\r\n            }\r\n            \r\n            .team-member img {\r\n                width: 100px;\r\n                height: 100px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 480px) {\r\n            .services, .about, .mission-vision, .team, .contact {\r\n                padding: 40px 0;\r\n            }\r\n            \r\n            .section-title {\r\n                margin-bottom: 30px;\r\n            }\r\n            \r\n            .section-title h2 {\r\n                font-size: 1.6rem;\r\n            }\r\n            \r\n            .service-card h3, .card h3 {\r\n                font-size: 1.2rem;\r\n            }\r\n            \r\n            .service-card p, .card p, .team-member p, .about p, .contact-info p {\r\n                font-size: 0.9rem;\r\n            }\r\n            \r\n            .about-content {\r\n                gap: 25px;\r\n            }\r\n            \r\n            .contact-container {\r\n                gap: 20px;\r\n            }\r\n            \r\n            .form-group {\r\n                margin-bottom: 15px;\r\n            }\r\n            \r\n            .social-links a {\r\n                width: 35px;\r\n                height: 35px;\r\n            }\r\n            \r\n            .map iframe {\r\n                height: 200px;\r\n            }\r\n        }\r\n\r\n        @media (max-width: 350px) {\r\n            .container {\r\n                padding: 0 10px;\r\n            }\r\n            \r\n            .service-card, .card, .team-member, .contact-form, .contact-info {\r\n                padding: 20px 15px;\r\n            }\r\n            \r\n            .service-icon {\r\n                font-size: 2.2rem;\r\n            }\r\n            \r\n            .team-member img {\r\n                width: 80px;\r\n                height: 80px;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <!-- Services Section -->\r\n    <section class=\"services\" id=\"services\">\r\n        <div class=\"container\">\r\n            <div class=\"section-title\">\r\n                <h2>Our Services<\/h2>\r\n                <p>We offer a comprehensive range of IT services to help your business grow and succeed in the digital world.<\/p>\r\n            <\/div>\r\n            <div class=\"services-grid\">\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\r\n                        <i class=\"fas fa-laptop-code\"><\/i>\r\n                    <\/div>\r\n                    <h3>Web Development<\/h3>\r\n                    <p>Custom websites and web applications built with the latest technologies to deliver exceptional user experiences.<\/p>\r\n                    <a href=\"http:\/\/localhost\/wordpress\/web-development\/?customize_changeset_uuid=e1c8f8f7-2a10-4f27-9989-16aefccaeed0\" class=\"service-link\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n                <\/div>\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\r\n                        <i class=\"fas fa-mobile-alt\"><\/i>\r\n                    <\/div>\r\n                    <h3>App Development<\/h3>\r\n                    <p>Native and cross-platform mobile applications designed to engage users and drive business growth.<\/p>\r\n                    <a href=\"http:\/\/localhost\/wordpress\/app-development\/?customize_changeset_uuid=e1c8f8f7-2a10-4f27-9989-16aefccaeed0\" class=\"service-link\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n                <\/div>\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-icon\">\r\n                        <i class=\"fas fa-cogs\"><\/i>\r\n                    <\/div>\r\n                    <h3>Software Development<\/h3>\r\n                    <p>Custom software tailored to your business needs, from inventory management to enterprise solutions.<\/p>\r\n                    <a href=\"http:\/\/localhost\/wordpress\/software-development\/?customize_changeset_uuid=e1c8f8f7-2a10-4f27-9989-16aefccaeed0\" class=\"service-link\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- About Section -->\r\n    <section class=\"about\" id=\"about\">\r\n        <div class=\"container\">\r\n            <div class=\"about-content\">\r\n                <div class=\"about-text\">\r\n                    <h2>About Us<\/h2>\r\n                    <p>Ultimate Solutions is a leading IT and software development company providing innovative and reliable solutions to businesses of all sizes.<\/p>\r\n                    <p>Our expertise spans web development, app development, enterprise software, and digital transformation services.<\/p>\r\n                    <p>We are committed to delivering high-quality solutions that help our clients achieve their business goals and stay ahead of the competition.<\/p>\r\n                <\/div>\r\n                <div class=\"about-image\">\r\n                    <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80\" alt=\"Our Team\">\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Mission & Vision Section -->\r\n    <section class=\"mission-vision\">\r\n        <div class=\"container\">\r\n            <div class=\"section-title\">\r\n                <h2>Our Mission & Vision<\/h2>\r\n                <p>Our guiding principles that drive everything we do at Ultimate Solutions.<\/p>\r\n            <\/div>\r\n            <div class=\"mission-vision-grid\">\r\n                <div class=\"card\">\r\n                    <h3>Our Mission<\/h3>\r\n                    <p>To empower businesses with cutting-edge technology solutions that enhance efficiency, growth, and profitability.<\/p>\r\n                <\/div>\r\n                <div class=\"card\">\r\n                    <h3>Our Vision<\/h3>\r\n                    <p>To be the most trusted technology partner globally, known for innovation, quality, and excellence in service.<\/p>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <!-- Contact Section -->\r\n    <section class=\"contact\" id=\"contact\">\r\n        <div class=\"container\">\r\n            <div class=\"section-title\">\r\n                <h2>Get in Touch<\/h2>\r\n                <p>Have a project in mind? Let's discuss how we can help bring your ideas to life.<\/p>\r\n            <\/div>\r\n            <div class=\"contact-container\">\r\n                <!-- Contact Form -->\r\n                <div class=\"contact-form\">\r\n                    <form id=\"contactForm\">\r\n                        <div class=\"form-group\">\r\n                            <label for=\"fullName\">Full Name<\/label>\r\n                            <input type=\"text\" id=\"fullName\" placeholder=\"Enter your full name\" required>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"form-group\">\r\n                            <label for=\"email\">Email Address<\/label>\r\n                            <input type=\"email\" id=\"email\" placeholder=\"Enter your email address\" required>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"form-group\">\r\n                            <label for=\"subject\">Subject<\/label>\r\n                            <input type=\"text\" id=\"subject\" placeholder=\"Enter the subject\" required>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"form-group\">\r\n                            <label for=\"message\">Your Message<\/label>\r\n                            <textarea id=\"message\" rows=\"5\" placeholder=\"Enter your message\" required><\/textarea>\r\n                        <\/div>\r\n                        \r\n                        <button type=\"submit\">Send Message<\/button>\r\n                    <\/form>\r\n                <\/div>\r\n\r\n                <!-- Contact Info -->\r\n                <div class=\"contact-info\">\r\n                    <h3>Contact Information<\/h3>\r\n                    <p><strong>Email:<\/strong> info@ultsol.biz<\/p>\r\n                    <p><strong>Phone:<\/strong> +92 300 6468177<\/p>\r\n                    <p><strong>Address:<\/strong> Near Sadique Sadiq Hospital, Sheikhupura Road, Gujranwala<\/p>\r\n\r\n                    <!-- Social Links with Icons -->\r\n                    <div class=\"social-links\">\r\n                        <a href=\"#\" aria-label=\"Facebook\"><i class=\"fab fa-facebook-f\"><\/i><\/a>\r\n                        <a href=\"#\" aria-label=\"Twitter\"><i class=\"fab fa-twitter\"><\/i><\/a>\r\n                        <a href=\"#\" aria-label=\"LinkedIn\"><i class=\"fab fa-linkedin-in\"><\/i><\/a>\r\n                        <a href=\"#\" aria-label=\"Instagram\"><i class=\"fab fa-instagram\"><\/i><\/a>\r\n                    <\/div>\r\n\r\n                    <div class=\"map\">\r\n                        <iframe src=\"https:\/\/maps.google.com\/maps?q=gujranwala&t=&z=13&ie=UTF8&iwloc=&output=embed\" width=\"100%\" height=\"250\" style=\"border:0;\" allowfullscreen=\"\" loading=\"lazy\"><\/iframe>\r\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/section>\r\n\r\n    <script>\r\n        \/\/ Contact Form Submission\r\n        document.getElementById('contactForm').addEventListener('submit', function(e){\r\n            e.preventDefault();\r\n            const name = document.getElementById('fullName').value;\r\n            const email = document.getElementById('email').value;\r\n            const subject = document.getElementById('subject').value;\r\n            const message = document.getElementById('message').value;\r\n            \r\n            if(name && email && subject && message) {\r\n                Swal.fire({\r\n                    title: 'Thank you!',\r\n                    text: 'Your message has been sent successfully. We will get back to you shortly.',\r\n                    icon: 'success',\r\n                    confirmButtonText: 'OK',\r\n                    confirmButtonColor: '#0078d7'\r\n                }).then(() => {\r\n                    this.reset();\r\n                });\r\n            } else {\r\n                Swal.fire({\r\n                    title: 'Oops...',\r\n                    text: 'Please fill in all required fields.',\r\n                    icon: 'error',\r\n                    confirmButtonText: 'OK',\r\n                    confirmButtonColor: '#0078d7'\r\n                });\r\n            }\r\n        });\r\n\r\n        \/\/ Smooth scrolling for anchor links\r\n        document.querySelectorAll('a[href^=\"#\"]').forEach(anchor => {\r\n            anchor.addEventListener('click', function (e) {\r\n                e.preventDefault();\r\n                \r\n                const targetId = this.getAttribute('href');\r\n                if(targetId === '#') return;\r\n                \r\n                const targetElement = document.querySelector(targetId);\r\n                if(targetElement) {\r\n                    window.scrollTo({\r\n                        top: targetElement.offsetTop - 80,\r\n                        behavior: 'smooth'\r\n                    });\r\n                }\r\n            });\r\n        });\r\n\r\n        \/\/ Add animation on scroll\r\n        const observerOptions = {\r\n            threshold: 0.1,\r\n            rootMargin: '0px 0px -50px 0px'\r\n        };\r\n\r\n        const observer = new IntersectionObserver((entries) => {\r\n            entries.forEach(entry => {\r\n                if(entry.isIntersecting) {\r\n                    entry.target.style.animation = `fadeInUp 1s ease forwards`;\r\n                }\r\n            });\r\n        }, observerOptions);\r\n\r\n        \/\/ Observe elements for animation\r\n        document.querySelectorAll('.service-card, .card, .team-member, .about-text, .about-image').forEach(el => {\r\n            observer.observe(el);\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Ultimate Solutions &#8211; Home Our Services We offer a comprehensive range of IT services to help your business grow and succeed in the digital world. Web Development Custom websites and web applications built with the latest technologies to deliver exceptional user experiences. Learn More App Development Native and cross-platform mobile applications designed to engage users [&hellip;]<\/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":["post-120","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/pages\/120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/comments?post=120"}],"version-history":[{"count":101,"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/pages\/120\/revisions"}],"predecessor-version":[{"id":820,"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/pages\/120\/revisions\/820"}],"wp:attachment":[{"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/media?parent=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}