{"id":235,"date":"2025-11-17T04:38:20","date_gmt":"2025-11-17T04:38:20","guid":{"rendered":"https:\/\/ultsol.cloud\/?page_id=235"},"modified":"2026-01-14T12:03:58","modified_gmt":"2026-01-14T12:03:58","slug":"career","status":"publish","type":"page","link":"https:\/\/ultsol.cloud\/index.php\/career\/","title":{"rendered":"Career"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Careers | Join Our Team<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <style>\r\n :root {\r\n --primary: #2c3e50;\r\n --secondary: #3498db;\r\n --accent: #e74c3c;\r\n --success: #2ecc71;\r\n --light: #ecf0f1;\r\n --dark: #2c3e50;\r\n --text: #333;\r\n --text-light: #7f8c8d;\r\n --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n --transition: all 0.3s ease;\r\n}\r\n\r\n* {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n}\r\n\r\nbody {\r\n background-color:transparent;\r\n color: var(--text);\r\n line-height: 1.6;\r\n width: 100%;\r\n overflow-x: hidden;\r\n}\r\n\r\n\/* Header & Hero Section *\/\r\n.hero {\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n color: white;\r\n padding: 100px 20px 80px;\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n width: 100%;\r\n \r\n}\r\n\r\n.hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: url('data:image\/svg+xml;utf8,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 1440 320\"><path fill=\"%23ffffff\" fill-opacity=\"0.1\" d=\"M0,96L48,112C96,128,192,160,288,186.7C384,213,480,235,576,213.3C672,192,768,128,864,128C960,128,1056,192,1152,192C1248,192,1344,128,1392,96L1440,64L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z\"><\/path><\/svg>');\r\n background-size: cover;\r\n background-position: center;\r\n \r\n \r\n}\r\n\r\n.hero-content {\r\n position: relative;\r\n z-index: 1;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n \r\n}\r\n\r\n.hero h1 {\r\n font-size: 3.5rem;\r\n margin-bottom: 20px;\r\n font-weight: 700;\r\n \r\n}\r\n\r\n.hero .subtitle {\r\n font-size: 1.3rem;\r\n max-width: 700px;\r\n margin: 0 auto 30px;\r\n opacity: 0.9;\r\n \r\n}\r\n\r\n.cta-button {\r\n display: inline-block;\r\n background: var(--accent);\r\n color: white;\r\n padding: 15px 30px;\r\n border-radius: 30px;\r\n text-decoration: none;\r\n font-weight: 600;\r\n font-size: 1.1rem;\r\n transition: var(--transition);\r\n box-shadow: 0 4px 15px rgba(231, 76, 60, 0.3);\r\n}\r\n\r\n.cta-button:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 20px rgba(231, 76, 60, 0.4);\r\n}\r\n\r\n\/* Navigation *\/\r\n.nav-container {\r\n background: white;\r\n box-shadow: var(--shadow);\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n width: 100%;\r\n}\r\n\r\nnav {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 15px 5%;\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n}\r\n\r\n.logo {\r\n font-size: 1.8rem;\r\n font-weight: 700;\r\n color: var(--primary);\r\n text-decoration: none;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.nav-links {\r\n display: flex;\r\n gap: 30px;\r\n}\r\n\r\n.nav-links a {\r\n text-decoration: none;\r\n color: var(--text);\r\n font-weight: 500;\r\n transition: var(--transition);\r\n padding: 5px 0;\r\n position: relative;\r\n}\r\n\r\n.nav-links a:hover {\r\n color: var(--secondary);\r\n}\r\n\r\n.nav-links a.active {\r\n color: var(--secondary);\r\n}\r\n\r\n.nav-links a.active::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 2px;\r\n background: var(--secondary);\r\n}\r\n\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: var(--primary);\r\n cursor: pointer;\r\n}\r\n\r\n\/* Search and Filter Section *\/\r\n.controls {\r\n background: white;\r\n padding: 25px;\r\n border-radius: 10px;\r\n box-shadow: var(--shadow);\r\n margin: -40px 5% 40px;\r\n position: relative;\r\n z-index: 10;\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 20px;\r\n max-width: 1300px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n margin-top: 80px;\r\n}\r\n\r\n.search-box {\r\n flex: 1;\r\n min-width: 250px;\r\n position: relative;\r\n}\r\n\r\n.search-box input {\r\n width: 100%;\r\n padding: 12px 20px 12px 45px;\r\n border: 1px solid #ddd;\r\n border-radius: 30px;\r\n font-size: 1rem;\r\n transition: var(--transition);\r\n}\r\n\r\n.search-box input:focus {\r\n outline: none;\r\n border-color: var(--secondary);\r\n box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);\r\n}\r\n\r\n.search-box i {\r\n position: absolute;\r\n left: 15px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: var(--text-light);\r\n}\r\n\r\n.filter-options {\r\n display: flex;\r\n gap: 10px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.filter-btn {\r\n padding: 10px 20px;\r\n background: var(--light);\r\n border: none;\r\n border-radius: 30px;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n font-weight: 500;\r\n}\r\n\r\n.filter-btn:hover {\r\n background: #dde4e6;\r\n}\r\n\r\n.filter-btn.active {\r\n background: var(--secondary);\r\n color: white;\r\n}\r\n\r\n\/* Job Listings *\/\r\n.section {\r\n padding: 80px 5%;\r\n width: 100%;\r\n \r\n}\r\n\r\n.section-title {\r\n font-size: 2.2rem;\r\n text-align: center;\r\n margin-bottom: 40px;\r\n color: var(--primary);\r\n max-width: 1200px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.jobs-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\r\n gap: 30px;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n}\r\n\r\n.job-card {\r\n background: white;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n box-shadow: var(--shadow);\r\n transition: var(--transition);\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n}\r\n\r\n.job-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.job-header {\r\n padding: 25px 25px 15px;\r\n border-bottom: 1px solid #eee;\r\n}\r\n\r\n.job-title {\r\n font-size: 1.3rem;\r\n margin-bottom: 8px;\r\n color: var(--primary);\r\n}\r\n\r\n.job-meta {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 15px;\r\n margin-bottom: 15px;\r\n}\r\n\r\n.job-meta-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n color: var(--text-light);\r\n font-size: 0.9rem;\r\n}\r\n\r\n.job-meta-item i {\r\n color: var(--secondary);\r\n}\r\n\r\n.job-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n}\r\n\r\n.job-tag {\r\n background: var(--light);\r\n padding: 4px 12px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n color: var(--text-light);\r\n}\r\n\r\n.job-body {\r\n padding: 20px 25px;\r\n flex-grow: 1;\r\n}\r\n\r\n.job-description {\r\n color: var(--text-light);\r\n margin-bottom: 20px;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n}\r\n\r\n.job-requirements {\r\n margin-bottom: 20px;\r\n}\r\n\r\n.requirements-title {\r\n font-size: 1rem;\r\n margin-bottom: 10px;\r\n color: var(--primary);\r\n}\r\n\r\n.requirements-list {\r\n list-style-type: none;\r\n}\r\n\r\n.requirements-list li {\r\n position: relative;\r\n padding-left: 20px;\r\n margin-bottom: 8px;\r\n color: var(--text-light);\r\n font-size: 0.9rem;\r\n}\r\n\r\n.requirements-list li::before {\r\n content: '\u2022';\r\n color: var(--secondary);\r\n position: absolute;\r\n left: 0;\r\n}\r\n\r\n.job-footer {\r\n padding: 0 25px 25px;\r\n margin-top: auto;\r\n}\r\n\r\n.apply-btn {\r\n background: var(--primary);\r\n color: white;\r\n border: none;\r\n padding: 10px 20px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n font-weight: 500;\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n}\r\n\r\n.apply-btn:hover {\r\n background: var(--secondary);\r\n}\r\n\r\n\/* Benefits Section *\/\r\n.benefits-section {\r\n background: white;\r\n padding: 80px 5%;\r\n margin: 40px 0;\r\n width: 100%;\r\n}\r\n\r\n.benefits-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n gap: 30px;\r\n margin-top: 40px;\r\n max-width: 1300px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.benefit-card {\r\n text-align: center;\r\n padding: 30px 20px;\r\n border-radius: 10px;\r\n background: var(--light);\r\n transition: var(--transition);\r\n}\r\n\r\n.benefit-card:hover {\r\n transform: translateY(-5px);\r\n box-shadow: var(--shadow);\r\n}\r\n\r\n.benefit-icon {\r\n width: 70px;\r\n height: 70px;\r\n background: var(--secondary);\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n margin: 0 auto 20px;\r\n color: white;\r\n font-size: 1.8rem;\r\n}\r\n\r\n.benefit-title {\r\n font-size: 1.2rem;\r\n margin-bottom: 15px;\r\n color: var(--primary);\r\n}\r\n\r\n.benefit-description {\r\n color: var(--text-light);\r\n}\r\n\r\n\/* Testimonials *\/\r\n.testimonials-section {\r\n background: var(--light);\r\n padding: 80px 5%;\r\n width: 100%;\r\n}\r\n\r\n.testimonials-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 30px;\r\n margin-top: 40px;\r\n max-width: 1300px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.testimonial-card {\r\n background: white;\r\n padding: 30px;\r\n border-radius: 10px;\r\n box-shadow: var(--shadow);\r\n position: relative;\r\n}\r\n\r\n.testimonial-text {\r\n font-style: italic;\r\n margin-bottom: 20px;\r\n color: var(--text);\r\n}\r\n\r\n.testimonial-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 15px;\r\n}\r\n\r\n.author-avatar {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n background: var(--secondary);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n font-weight: bold;\r\n}\r\n\r\n.author-info h4 {\r\n color: var(--primary);\r\n margin-bottom: 5px;\r\n}\r\n\r\n.author-info p {\r\n color: var(--text-light);\r\n font-size: 0.9rem;\r\n}\r\n\r\n\/* Footer *\/\r\nfooter {\r\n background: var(--primary);\r\n color: white;\r\n padding: 60px 5% 30px;\r\n width: 100%;\r\n}\r\n\r\n.footer-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\r\n gap: 40px;\r\n max-width: 1300px;\r\n margin: 0 auto 40px;\r\n}\r\n\r\n.footer-column h3 {\r\n font-size: 1.3rem;\r\n margin-bottom: 20px;\r\n position: relative;\r\n padding-bottom: 10px;\r\n}\r\n\r\n.footer-column h3::after {\r\n content: '';\r\n position: absolute;\r\n bottom: 0;\r\n left: 0;\r\n width: 40px;\r\n height: 2px;\r\n background: var(--secondary);\r\n}\r\n\r\n.footer-links {\r\n list-style: none;\r\n}\r\n\r\n.footer-links li {\r\n margin-bottom: 10px;\r\n}\r\n\r\n.footer-links a {\r\n color: #bdc3c7;\r\n text-decoration: none;\r\n transition: var(--transition);\r\n}\r\n\r\n.footer-links a:hover {\r\n color: white;\r\n padding-left: 5px;\r\n}\r\n\r\n.social-links {\r\n display: flex;\r\n gap: 15px;\r\n margin-top: 20px;\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: 40px;\r\n height: 40px;\r\n background: rgba(255, 255, 255, 0.1);\r\n border-radius: 50%;\r\n color: white;\r\n transition: var(--transition);\r\n}\r\n\r\n.social-links a:hover {\r\n background: var(--secondary);\r\n transform: translateY(-3px);\r\n}\r\n\r\n.footer-bottom {\r\n text-align: center;\r\n padding-top: 30px;\r\n border-top: 1px solid rgba(255, 255, 255, 0.1);\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n color: #bdc3c7;\r\n font-size: 0.9rem;\r\n}\r\n\r\n\/* Modal Styles *\/\r\n.modal {\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.7);\r\n z-index: 1000;\r\n overflow-y: auto;\r\n padding: 20px;\r\n}\r\n\r\n.modal-content {\r\n background: white;\r\n max-width: 800px;\r\n margin: 50px auto;\r\n border-radius: 10px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\r\n animation: modalFade 0.3s;\r\n}\r\n\r\n@keyframes modalFade {\r\n from { opacity: 0; transform: translateY(-50px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n.modal-header {\r\n background: linear-gradient(135deg, var(--primary), var(--secondary));\r\n color: white;\r\n padding: 25px;\r\n position: relative;\r\n}\r\n\r\n.close-modal {\r\n position: absolute;\r\n top: 20px;\r\n right: 20px;\r\n background: rgba(255, 255, 255, 0.2);\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n}\r\n\r\n.close-modal:hover {\r\n background: rgba(255, 255, 255, 0.3);\r\n}\r\n\r\n.modal-body {\r\n padding: 30px;\r\n}\r\n\r\n.application-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n}\r\n\r\n.form-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 8px;\r\n}\r\n\r\n.form-group label {\r\n font-weight: 500;\r\n color: var(--primary);\r\n}\r\n\r\n.form-group input,\r\n.form-group textarea,\r\n.form-group select {\r\n padding: 12px 15px;\r\n border: 1px solid #ddd;\r\n border-radius: 5px;\r\n font-size: 1rem;\r\n transition: var(--transition);\r\n}\r\n\r\n.form-group input:focus,\r\n.form-group textarea:focus,\r\n.form-group select:focus {\r\n outline: none;\r\n border-color: var(--secondary);\r\n box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);\r\n}\r\n\r\n.form-row {\r\n display: flex;\r\n gap: 20px;\r\n}\r\n\r\n.form-row .form-group {\r\n flex: 1;\r\n}\r\n\r\n.file-upload {\r\n border: 2px dashed #ddd;\r\n border-radius: 5px;\r\n padding: 20px;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n}\r\n\r\n.file-upload:hover {\r\n border-color: var(--secondary);\r\n}\r\n\r\n.file-upload i {\r\n font-size: 2rem;\r\n color: var(--text-light);\r\n margin-bottom: 10px;\r\n}\r\n\r\n.file-upload input {\r\n display: none;\r\n}\r\n\r\n.submit-btn {\r\n background: var(--success);\r\n color: white;\r\n border: none;\r\n padding: 15px;\r\n border-radius: 5px;\r\n cursor: pointer;\r\n transition: var(--transition);\r\n font-weight: 500;\r\n font-size: 1rem;\r\n margin-top: 10px;\r\n}\r\n\r\n.submit-btn:hover {\r\n background: #27ae60;\r\n}\r\n\r\n\/* RESPONSIVE DESIGN *\/\r\n@media (max-width: 1024px) {\r\n .hero h1 { font-size: 2.8rem; }\r\n .section { padding: 60px 5%; }\r\n .section-title { font-size: 2rem; }\r\n .jobs-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .hero { padding: 80px 5% 60px; }\r\n .hero h1 { font-size: 2.2rem; }\r\n .hero .subtitle { font-size: 1.1rem; }\r\n .nav-links { \r\n display: none; \r\n position: absolute;\r\n top: 100%;\r\n left: 0;\r\n width: 100%;\r\n background: white;\r\n flex-direction: column;\r\n padding: 20px;\r\n box-shadow: 0 10px 15px rgba(0,0,0,0.1);\r\n gap: 15px;\r\n }\r\n .nav-links.active { display: flex; }\r\n .mobile-menu-btn { display: block; }\r\n .controls { margin-top: -30px; padding: 20px; }\r\n .filter-options { justify-content: center; }\r\n .form-row { flex-direction: column; gap: 0; }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n .hero { padding: 60px 5% 40px; }\r\n .hero h1 { font-size: 1.8rem; }\r\n .hero .subtitle { font-size: 1rem; }\r\n .section { padding: 40px 5%; }\r\n .section-title { font-size: 1.6rem; margin-bottom: 30px; }\r\n .jobs-grid { grid-template-columns: 1fr; }\r\n .job-card { margin-bottom: 20px; }\r\n .job-header, .job-body, .job-footer { padding: 20px; }\r\n .benefits-grid, .testimonials-grid { grid-template-columns: 1fr; }\r\n .footer-grid { grid-template-columns: 1fr; gap: 30px; }\r\n .modal-content { margin: 20px auto; }\r\n .modal-body { padding: 20px; }\r\n}\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <!-- Header Section -->\r\n <section>\r\n <div class=\"container\">\r\n <div class=\"header-content\">\r\n <h1 style=\" text-align: center;\">Join Our Team<\/h1>\r\n <p class=\"subtitle\" style=\" text-align: center;\">Discover exciting career opportunities and be part of our innovative team. We're looking for talented individuals who are passionate about making a difference.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n\r\n\r\n <!-- Search and Filter Controls -->\r\n <div class=\"container\">\r\n <div class=\"controls\">\r\n <div class=\"search-box\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <input type=\"text\" id=\"searchInput\" placeholder=\"Search jobs by title, skills, or keywords...\">\r\n <\/div>\r\n <div class=\"filter-options\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">All Jobs<\/button>\r\n <button class=\"filter-btn\" data-filter=\"development\">Development<\/button>\r\n <button class=\"filter-btn\" data-filter=\"design\">Design<\/button>\r\n <button class=\"filter-btn\" data-filter=\"marketing\">Marketing<\/button>\r\n <button class=\"filter-btn\" data-filter=\"operations\">Operations<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Job Listings Section -->\r\n <section class=\"jobs-section\">\r\n <div class=\"container\">\r\n <h2 class=\"section-title\">Open Positions<\/h2>\r\n <div class=\"jobs-grid\" id=\"jobsGrid\">\r\n <!-- Job listings will be dynamically inserted here -->\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Benefits Section -->\r\n <section class=\"benefits-section\">\r\n <div class=\"container\">\r\n <h2 class=\"section-title\">Why Work With Us<\/h2>\r\n <div class=\"benefits-grid\">\r\n <div class=\"benefit-card\">\r\n <div class=\"benefit-icon\">\r\n <i class=\"fas fa-heart\"><\/i>\r\n <\/div>\r\n <h3 class=\"benefit-title\">Health & Wellness<\/h3>\r\n <p class=\"benefit-description\">Comprehensive health insurance, wellness programs, and mental health support.<\/p>\r\n <\/div>\r\n <div class=\"benefit-card\">\r\n <div class=\"benefit-icon\">\r\n <i class=\"fas fa-graduation-cap\"><\/i>\r\n <\/div>\r\n <h3 class=\"benefit-title\">Learning & Development<\/h3>\r\n <p class=\"benefit-description\">Continuous learning opportunities with training budgets and conference support.<\/p>\r\n <\/div>\r\n <div class=\"benefit-card\">\r\n <div class=\"benefit-icon\">\r\n <i class=\"fas fa-home\"><\/i>\r\n <\/div>\r\n <h3 class=\"benefit-title\">Flexible Work<\/h3>\r\n <p class=\"benefit-description\">Remote work options and flexible hours to support work-life balance.<\/p>\r\n <\/div>\r\n <div class=\"benefit-card\">\r\n <div class=\"benefit-icon\">\r\n <i class=\"fas fa-utensils\"><\/i>\r\n <\/div>\r\n <h3 class=\"benefit-title\">Food & Snacks<\/h3>\r\n <p class=\"benefit-description\">Fully stocked kitchen with healthy snacks, drinks, and catered lunches.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- Application Modal -->\r\n <div class=\"modal\" id=\"applicationModal\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <h2 id=\"modalJobTitle\">Apply for Position<\/h2>\r\n <div class=\"close-modal\" id=\"closeModal\">\r\n <i class=\"fas fa-times\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <form class=\"application-form\" id=\"applicationForm\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"firstName\">First Name<\/label>\r\n <input type=\"text\" id=\"firstName\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"lastName\">Last Name<\/label>\r\n <input type=\"text\" id=\"lastName\" required>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"email\">Email Address<\/label>\r\n <input type=\"email\" id=\"email\" required>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"phone\">Phone Number<\/label>\r\n <input type=\"tel\" id=\"phone\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"linkedin\">LinkedIn Profile<\/label>\r\n <input type=\"url\" id=\"linkedin\" placeholder=\"https:\/\/linkedin.com\/in\/yourprofile\">\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"coverLetter\">Cover Letter<\/label>\r\n <textarea id=\"coverLetter\" rows=\"5\" placeholder=\"Tell us why you're interested in this position...\"><\/textarea>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label>Resume\/CV<\/label>\r\n <div class=\"file-upload\" id=\"resumeUpload\">\r\n <i class=\"fas fa-cloud-upload-alt\"><\/i>\r\n <p>Click to upload your resume<\/p>\r\n <input type=\"file\" id=\"resume\" accept=\".pdf,.doc,.docx\">\r\n <\/div>\r\n <\/div>\r\n <button type=\"submit\" class=\"submit-btn\">Submit Application<\/button>\r\n <\/form>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Job Data\r\n const jobsData = [\r\n {\r\n id: 1,\r\n title: \"Senior Frontend Developer\",\r\n department: \"development\",\r\n type: \"Full-time\",\r\n location: \"San Francisco, CA\",\r\n remote: true,\r\n experience: \"5+ years\",\r\n description: \"We're looking for an experienced Frontend Developer to join our product team. You'll be responsible for building responsive web applications using modern JavaScript frameworks.\",\r\n requirements: [\r\n \"Strong proficiency in JavaScript, HTML, and CSS\",\r\n \"Experience with React.js or Vue.js\",\r\n \"Knowledge of responsive design principles\",\r\n \"Familiarity with RESTful APIs\",\r\n \"Experience with version control (Git)\"\r\n ],\r\n skills: [\"JavaScript\", \"React\", \"Vue.js\", \"HTML\/CSS\", \"REST APIs\"]\r\n },\r\n {\r\n id: 2,\r\n title: \"UX\/UI Designer\",\r\n department: \"design\",\r\n type: \"Full-time\",\r\n location: \"Remote\",\r\n remote: true,\r\n experience: \"3+ years\",\r\n description: \"Join our design team to create beautiful and intuitive user experiences. You'll work closely with product managers and developers to bring ideas to life.\",\r\n requirements: [\r\n \"Portfolio demonstrating UI\/UX design work\",\r\n \"Proficiency in design tools (Figma, Sketch, or Adobe XD)\",\r\n \"Understanding of user-centered design principles\",\r\n \"Experience with prototyping and user testing\",\r\n \"Knowledge of accessibility standards\"\r\n ],\r\n skills: [\"UI\/UX Design\", \"Figma\", \"User Research\", \"Prototyping\", \"Wireframing\"]\r\n },\r\n {\r\n id: 3,\r\n title: \"Digital Marketing Manager\",\r\n department: \"marketing\",\r\n type: \"Full-time\",\r\n location: \"New York, NY\",\r\n remote: false,\r\n experience: \"4+ years\",\r\n description: \"We're seeking a Digital Marketing Manager to develop and execute our online marketing strategy. You'll drive brand awareness and lead generation through various digital channels.\",\r\n requirements: [\r\n \"Experience with SEO\/SEM and Google Analytics\",\r\n \"Knowledge of email marketing and marketing automation\",\r\n \"Social media marketing expertise\",\r\n \"Content creation and strategy experience\",\r\n \"Data-driven decision making skills\"\r\n ],\r\n skills: [\"Digital Marketing\", \"SEO\/SEM\", \"Google Analytics\", \"Social Media\", \"Content Strategy\"]\r\n },\r\n {\r\n id: 4,\r\n title: \"Backend Engineer\",\r\n department: \"development\",\r\n type: \"Full-time\",\r\n location: \"Austin, TX\",\r\n remote: true,\r\n experience: \"4+ years\",\r\n description: \"Join our backend team to build scalable and reliable systems. You'll work on API development, database design, and cloud infrastructure.\",\r\n requirements: [\r\n \"Strong proficiency in Node.js, Python, or Java\",\r\n \"Experience with database systems (SQL and NoSQL)\",\r\n \"Knowledge of cloud platforms (AWS, GCP, or Azure)\",\r\n \"Understanding of microservices architecture\",\r\n \"Experience with API design and development\"\r\n ],\r\n skills: [\"Node.js\", \"Python\", \"AWS\", \"SQL\", \"REST APIs\"]\r\n },\r\n {\r\n id: 5,\r\n title: \"Product Manager\",\r\n department: \"operations\",\r\n type: \"Full-time\",\r\n location: \"San Francisco, CA\",\r\n remote: true,\r\n experience: \"5+ years\",\r\n description: \"We're looking for a Product Manager to drive product strategy and execution. You'll work cross-functionally to deliver products that solve customer problems.\",\r\n requirements: [\r\n \"Experience in product management or related role\",\r\n \"Strong analytical and problem-solving skills\",\r\n \"Excellent communication and leadership abilities\",\r\n \"Experience with agile development methodologies\",\r\n \"Customer-centric mindset\"\r\n ],\r\n skills: [\"Product Management\", \"Agile\", \"User Stories\", \"Roadmapping\", \"Data Analysis\"]\r\n },\r\n {\r\n id: 6,\r\n title: \"DevOps Engineer\",\r\n department: \"development\",\r\n type: \"Full-time\",\r\n location: \"Remote\",\r\n remote: true,\r\n experience: \"3+ years\",\r\n description: \"Join our infrastructure team to build and maintain our CI\/CD pipelines, monitoring systems, and cloud infrastructure.\",\r\n requirements: [\r\n \"Experience with CI\/CD tools (Jenkins, GitLab CI, etc.)\",\r\n \"Knowledge of containerization (Docker, Kubernetes)\",\r\n \"Infrastructure as Code experience (Terraform, CloudFormation)\",\r\n \"Monitoring and logging tools expertise\",\r\n \"Scripting skills (Bash, Python, etc.)\"\r\n ],\r\n skills: [\"DevOps\", \"CI\/CD\", \"Docker\", \"Kubernetes\", \"AWS\"]\r\n }\r\n ];\r\n\r\n \/\/ DOM Elements\r\n const jobsGrid = document.getElementById('jobsGrid');\r\n const searchInput = document.getElementById('searchInput');\r\n const filterButtons = document.querySelectorAll('.filter-btn');\r\n const applicationModal = document.getElementById('applicationModal');\r\n const modalJobTitle = document.getElementById('modalJobTitle');\r\n const applicationForm = document.getElementById('applicationForm');\r\n const closeModal = document.getElementById('closeModal');\r\n const resumeUpload = document.getElementById('resumeUpload');\r\n\r\n \/\/ Initialize the page\r\n document.addEventListener('DOMContentLoaded', function() {\r\n renderJobs(jobsData);\r\n setupEventListeners();\r\n });\r\n\r\n \/\/ Render jobs to the grid\r\n function renderJobs(jobs) {\r\n jobsGrid.innerHTML = '';\r\n \r\n if (jobs.length === 0) {\r\n jobsGrid.innerHTML = '<p style=\"grid-column: 1 \/ -1; text-align: center; padding: 40px; color: var(--text-light);\">No jobs found matching your criteria.<\/p>';\r\n return;\r\n }\r\n \r\n jobs.forEach(job => {\r\n const jobElement = document.createElement('div');\r\n jobElement.className = 'job-card';\r\n jobElement.setAttribute('data-department', job.department);\r\n \r\n jobElement.innerHTML = `\r\n <div class=\"job-header\">\r\n <h3 class=\"job-title\">${job.title}<\/h3>\r\n <div class=\"job-meta\">\r\n <div class=\"job-meta-item\">\r\n <i class=\"fas fa-map-marker-alt\"><\/i>\r\n <span>${job.location}<\/span>\r\n <\/div>\r\n <div class=\"job-meta-item\">\r\n <i class=\"fas fa-clock\"><\/i>\r\n <span>${job.type}<\/span>\r\n <\/div>\r\n <div class=\"job-meta-item\">\r\n <i class=\"fas fa-briefcase\"><\/i>\r\n <span>${job.experience}<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"job-tags\">\r\n ${job.skills.map(skill => `<span class=\"job-tag\">${skill}<\/span>`).join('')}\r\n <\/div>\r\n <\/div>\r\n <div class=\"job-body\">\r\n <p class=\"job-description\">${job.description}<\/p>\r\n <div class=\"job-requirements\">\r\n <h4 class=\"requirements-title\">Key Requirements:<\/h4>\r\n <ul class=\"requirements-list\">\r\n ${job.requirements.map(req => `<li>${req}<\/li>`).join('')}\r\n <\/ul>\r\n <\/div>\r\n <\/div>\r\n <div class=\"job-footer\">\r\n <button class=\"apply-btn\" data-id=\"${job.id}\">\r\n <i class=\"fas fa-paper-plane\"><\/i>\r\n Apply Now\r\n <\/button>\r\n <\/div>\r\n `;\r\n \r\n jobsGrid.appendChild(jobElement);\r\n });\r\n \r\n \/\/ Add event listeners to apply buttons\r\n document.querySelectorAll('.apply-btn').forEach(button => {\r\n button.addEventListener('click', function() {\r\n const jobId = parseInt(this.getAttribute('data-id'));\r\n openApplicationModal(jobId);\r\n });\r\n });\r\n }\r\n\r\n \/\/ Set up event listeners for search and filter\r\n function setupEventListeners() {\r\n \/\/ Search functionality\r\n searchInput.addEventListener('input', function() {\r\n filterJobs();\r\n });\r\n \r\n \/\/ Filter buttons\r\n filterButtons.forEach(button => {\r\n button.addEventListener('click', function() {\r\n \/\/ Update active state\r\n filterButtons.forEach(btn => btn.classList.remove('active'));\r\n this.classList.add('active');\r\n \r\n filterJobs();\r\n });\r\n });\r\n \r\n \/\/ Close modal\r\n closeModal.addEventListener('click', function() {\r\n applicationModal.style.display = 'none';\r\n });\r\n \r\n \/\/ Close modal when clicking outside\r\n window.addEventListener('click', function(event) {\r\n if (event.target === applicationModal) {\r\n applicationModal.style.display = 'none';\r\n }\r\n });\r\n \r\n \/\/ File upload interaction\r\n resumeUpload.addEventListener('click', function() {\r\n document.getElementById('resume').click();\r\n });\r\n \r\n \/\/ Form submission\r\n applicationForm.addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n alert('Thank you for your application! We will review your submission and get back to you soon.');\r\n applicationModal.style.display = 'none';\r\n applicationForm.reset();\r\n });\r\n }\r\n\r\n \/\/ Filter jobs based on search and department\r\n function filterJobs() {\r\n const searchTerm = searchInput.value.toLowerCase();\r\n const activeFilter = document.querySelector('.filter-btn.active').getAttribute('data-filter');\r\n \r\n const filteredJobs = jobsData.filter(job => {\r\n const matchesSearch = job.title.toLowerCase().includes(searchTerm) || \r\n job.description.toLowerCase().includes(searchTerm) ||\r\n job.skills.some(skill => skill.toLowerCase().includes(searchTerm));\r\n \r\n const matchesFilter = activeFilter === 'all' || job.department === activeFilter;\r\n \r\n return matchesSearch && matchesFilter;\r\n });\r\n \r\n renderJobs(filteredJobs);\r\n }\r\n\r\n \/\/ Open application modal\r\n function openApplicationModal(jobId) {\r\n const job = jobsData.find(j => j.id === jobId);\r\n \r\n if (!job) return;\r\n \r\n modalJobTitle.textContent = `Apply for ${job.title}`;\r\n applicationModal.style.display = 'block';\r\n }\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\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>Careers | Join Our Team Join Our Team Discover exciting career opportunities and be part of our innovative team. We’re looking for talented individuals who are passionate about making a difference. All Jobs Development Design Marketing Operations Open Positions Why Work With Us Health & Wellness Comprehensive health insurance, wellness programs, and mental health support. […]<\/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-235","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/pages\/235","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=235"}],"version-history":[{"count":88,"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/pages\/235\/revisions"}],"predecessor-version":[{"id":884,"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/pages\/235\/revisions\/884"}],"wp:attachment":[{"href":"https:\/\/ultsol.cloud\/index.php\/wp-json\/wp\/v2\/media?parent=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}