Department Courses<\/title>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n* {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Sora', Arial, sans-serif;\r\n}\r\n\r\n\/* FULL PAGE YELLOW BACKGROUND *\/\r\nhtml, body {\r\n width: 100%;\r\n min-height: 100vh;\r\n background: #f0a500;\r\n}\r\n\r\n\/* PAGE WRAPPER - full width *\/\r\n#dept-outer {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n margin: 0 !important;\r\n padding: 0 0 60px 0;\r\n}\r\n\r\n\/* HEADER *\/\r\n\r\n.header {\r\n height: 110px;\r\n background: white;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 0 20px 30px 20px; \/* gap control here *\/\r\n box-sizing: border-box;\r\n border-radius: 14px;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.15);\r\n}\r\n\r\n\r\n\r\n\r\n.header img {\r\n max-width: 100%;\r\n max-height: 80px;\r\n object-fit: contain;\r\n}\r\n\r\n\/* HEADINGS *\/\r\n#dept-headings {\r\n display: flex;\r\n gap: 28px;\r\n margin-bottom: 20px;\r\n padding: 0 40px;\r\n}\r\n\r\n#dept-headings h2 {\r\n font-family: 'Sora', Arial, sans-serif;\r\n font-size: 35px;\r\n font-weight: 800;\r\n letter-spacing: -0.01em;\r\n color: #1a1a2e !important;\r\n text-align: center;\r\n text-shadow:\r\n 3px 4px 4px rgba(0,0,0,.23);\r\n animation: deptFadeUp 0.6s ease both;\r\n}\r\n\r\n#dept-headings h2:first-child { flex: 1; }\r\n#dept-headings h2:last-child { flex: 1; }\r\n\r\n\/* MAIN WRAPPER *\/\r\n#dept-wrapper {\r\n display: flex !important;\r\n gap: 28px;\r\n align-items: stretch;\r\n padding: 0 40px;\r\n}\r\n\r\n\/* LEFT SIDE *\/\r\n#dept-sidebar {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n}\r\n\r\n\/* BUTTONS *\/\r\n.dept-btn {\r\n display: block !important;\r\n width: 100% !important;\r\n padding: 47px 20px !important;\r\n background: linear-gradient(135deg, #1a1a2e 0%, #232348 100%) !important;\r\n border-radius: 0 !important;\r\n border: 3px solid white !important;\r\n text-align: center !important;\r\n font-family: 'Sora', Arial, sans-serif !important;\r\n font-size: 20px !important;\r\n font-weight: 600 !important;\r\n color: #ffffff !important;\r\n cursor: pointer !important;\r\n letter-spacing: 0.02em !important;\r\n position: relative !important;\r\n overflow: hidden !important;\r\n transition: transform 0.3s cubic-bezier(.2,.8,.2,1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;\r\n animation: deptFadeLeft 0.5s ease both;\r\n}\r\n\r\n.dept-btn::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: -75%;\r\n width: 50%;\r\n height: 100%;\r\n background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);\r\n transform: skewX(-20deg);\r\n transition: left 0.6s ease;\r\n}\r\n\r\n.dept-btn:hover::after {\r\n left: 125%;\r\n}\r\n\r\n.dept-btn:nth-child(1) { animation-delay: 0.05s; }\r\n.dept-btn:nth-child(2) { animation-delay: 0.1s; }\r\n.dept-btn:nth-child(3) { animation-delay: 0.15s; }\r\n.dept-btn:nth-child(4) { animation-delay: 0.2s; }\r\n.dept-btn:nth-child(5) { animation-delay: 0.25s; }\r\n\r\n.dept-btn:hover {\r\n background: linear-gradient(135deg, #f0b400 0%, #f7c948 100%) !important;\r\n color: #1a1a2e !important;\r\n transform: translateY(-4px) scale(1.015);\r\n box-shadow: 0 14px 28px rgba(0,0,0,.22) !important;\r\n}\r\n\r\n.dept-btn.dept-active {\r\n background: linear-gradient(135deg, orange 0%, #ffb733 100%) !important;\r\n color: #1a1a2e !important;\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.4) !important;\r\n}\r\n\r\n\/* RIGHT SIDE *\/\r\n#dept-content {\r\n flex: 1 !important;\r\n background: #ffffff !important;\r\n border-radius: 12px !important;\r\n padding: 28px 32px !important;\r\n\r\nheight: 570px;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n\r\n box-shadow: 0 10px 30px rgba(0,0,0,.12);\r\n animation: deptFadeUp 0.6s ease 0.15s both;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n#dept-content::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n#dept-content::-webkit-scrollbar-track {\r\n background: #f4f4f4;\r\n border-radius: 8px;\r\n}\r\n#dept-content::-webkit-scrollbar-thumb {\r\n background: #f0a500;\r\n border-radius: 8px;\r\n}\r\n#dept-content::-webkit-scrollbar-thumb:hover {\r\n background: #d68f00;\r\n}\r\n\r\n#dept-content h3 {\r\n font-family: 'Sora', Arial, sans-serif;\r\n font-size: 18px !important;\r\n font-weight: 700 !important;\r\n color: #1a1a2e !important;\r\n margin-bottom: 18px !important;\r\n}\r\n\r\n#dept-content ul {\r\n list-style: disc !important;\r\n padding-left: 20px !important;\r\n}\r\n\r\n#dept-content ul li {\r\n padding: 5px 0 !important;\r\n line-height: 1.6 !important;\r\n padding-left: 10px !important;\r\n transition: transform 0.25s ease !important;\r\n animation: deptItemIn 0.35s ease both;\r\n}\r\n\r\n#dept-content ul li:hover {\r\n transform: translateX(4px) !important;\r\n}\r\n\r\n#dept-content ul li a {\r\n font-family: 'Sora', Arial, sans-serif;\r\n font-size: 15px !important;\r\n color: #1a73e8 !important;\r\n font-weight: 500 !important;\r\n text-decoration: none !important;\r\n transition: color 0.2s ease !important;\r\n}\r\n\r\n#dept-content ul li a:hover {\r\n color: #f0a500 !important;\r\n text-decoration: underline !important;\r\n}\r\n\r\n.dept-placeholder {\r\n font-family: 'Sora', Arial, sans-serif;\r\n color: #aaa !important;\r\n font-size: 15px !important;\r\n margin-top: 40px !important;\r\n text-align: center !important;\r\n}\r\n\r\n\/* Kill WordPress parent container padding\/max-width *\/\r\n.elementor-widget-html,\r\n.elementor-widget-container,\r\n.elementor-column-wrap,\r\n.elementor-widget-wrap,\r\n.elementor-section,\r\n.elementor-container,\r\n.e-con,\r\n.e-con-inner,\r\n.entry-content,\r\n.site-content,\r\n.page-content,\r\nmain, article {\r\n max-width: 100% !important;\r\n padding-left: 0 !important;\r\n padding-right: 0 !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n@media (max-width: 750px) {\r\n #dept-headings, #dept-wrapper {\r\n flex-direction: column !important;\r\n padding: 0 16px;\r\n }\r\n\r\n #dept-sidebar {\r\n flex: unset !important;\r\n width: 100% !important;\r\n }\r\n}\r\n\r\n\r\n#dept-content h3 {\r\n display: none !important;\r\n}\r\n\r\n@keyframes deptFadeUp {\r\n from { opacity: 0; transform: translateY(14px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n@keyframes deptFadeLeft {\r\n from { opacity: 0; transform: translateX(-14px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n}\r\n\r\n@keyframes deptItemIn {\r\n from { opacity: 0; transform: translateY(6px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id=\"dept-outer\">\r\n\r\n \r\n \r\n \r\n \r\n <div class=\"header\">\r\n <img decoding=\"async\" src=\"https:\/\/app.pumotechnovationcrm.com\/wp-content\/uploads\/2026\/06\/logo.jpg\" alt=\"Pumo Technovation Logo\">\r\n <\/div>\r\n\r\n\r\n <div id=\"dept-headings\">\r\n <h2>Department<\/h2>\r\n <h2>List of Courses<\/h2>\r\n <\/div>\r\n\r\n <div id=\"dept-wrapper\">\r\n\r\n <div id=\"dept-sidebar\">\r\n <button class=\"dept-btn\" data-dept=\"multimedia\">Multimedia & Creative<\/button>\r\n <button class=\"dept-btn\" data-dept=\"sap\">SAP<\/button>\r\n <button class=\"dept-btn\" data-dept=\"civil\">Civil<\/button>\r\n <\/div>\r\n\r\n <div id=\"dept-content\">\r\n <p class=\"dept-placeholder\">Select a department to view courses<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/*\r\n ============================================================\r\n IMPORTANT: Fill in the \"url\" field for every course below.\r\n Replace \"#\" with the actual live page link for that course.\r\n Example:\r\n { name: \"Certified in SAP FICO\", url: \"http:\/\/localhost:8080\/wordpress-7.0\/demo\/sap-fico\/\" }\r\n ============================================================\r\n*\/\r\nvar deptData = {\r\n sap: { label: \"SAP Courses\", courses: [\r\n { name: \"Certified in SAP FICO\", url: \"#\" },\r\n { name: \"Certified in SAP MM\", url: \"#\" },\r\n { name: \"Certified in SAP MM & EWM\", url: \"#\" },\r\n { name: \"Certified in SAP MM & PP\", url: \"#\" },\r\n { name: \"Certified in SAP PP\", url: \"#\" },\r\n { name: \"Certified in SAP SD\", url: \"#\" },\r\n { name: \"Certified in SAP SUCCESS FACTOR\", url: \"#\" },\r\n { name: \"Masters in SAP ABAP\", url: \"#\" },\r\n { name: \"Masters in SAP BASIS\", url: \"#\" },\r\n { name: \"Masters in SAP FICO\", url: \"#\" },\r\n { name: \"Masters in SAP MM\", url: \"#\" },\r\n { name: \"Masters in SAP PP\", url: \"#\" },\r\n { name: \"Masters in SAP SCM\", url: \"#\" },\r\n { name: \"Masters in SAP SD\", url: \"#\" },\r\n { name: \"Professional in SAP ABAP\", url: \"#\" },\r\n { name: \"Professional in SAP BASIS\", url: \"#\" },\r\n { name: \"Professional in SAP FICO\", url: \"#\" },\r\n { name: \"Professional in SAP MM\", url: \"#\" },\r\n { name: \"Professional in SAP PP\", url: \"#\" },\r\n { name: \"Professional in SAP SD\", url: \"#\" }\r\n ]},\r\n multimedia: { label: \"Multimedia & Creative Courses\", courses: [\r\n { name: \"Certified in 3D-Animation\", url: \"#\" },\r\n { name: \"Certified in AR\/VR\", url: \"#\" },\r\n { name: \"Certified in Adobe Premiere Pro\", url: \"#\" },\r\n { name: \"Certified in Blender\", url: \"#\" },\r\n { name: \"Certified in Composting\", url: \"#\" },\r\n { name: \"Certified in CorelDraw\", url: \"#\" },\r\n { name: \"Certified in Digital Marketing\", url: \"#\" },\r\n { name: \"Certified in Digital marketing (SMM, SEM)\", url: \"#\" },\r\n { name: \"Certified in Fashion Design\", url: \"#\" },\r\n { name: \"Certified in Figma\", url: \"#\" },\r\n { name: \"Certified in Flutter\", url: \"#\" },\r\n { name: \"Certified in Game Design\", url: \"#\" },\r\n { name: \"Certified in Graphic Design\", url: \"#\" },\r\n { name: \"Certified in Jewellery Design\", url: \"#\" },\r\n { name: \"Certified in Maya\", url: \"#\" },\r\n { name: \"Certified in Motion Graphics\", url: \"#\" },\r\n { name: \"Certified in Photography\", url: \"#\" },\r\n { name: \"Certified in Photoshop\", url: \"#\" },\r\n { name: \"Certified in UI UX Design\", url: \"#\" },\r\n { name: \"Certified in UnrealEngine\", url: \"#\" },\r\n { name: \"Certified in VFX\", url: \"#\" },\r\n { name: \"Certified in Video Editing (premier Pro and after effects)\", url: \"#\" },\r\n { name: \"Certified in ZBrush\", url: \"#\" },\r\n { name: \"Master in AR\/VR\", url: \"#\" },\r\n { name: \"Master in UI UX Design\", url: \"#\" },\r\n { name: \"Master in VFX\", url: \"#\" },\r\n { name: \"Masters in 3D Animation\", url: \"#\" },\r\n { name: \"Masters in Digital Marketing\", url: \"#\" },\r\n { name: \"Masters in Digital Marketing with Creative Design (Graphics Design + Video Editing)\", url: \"#\" },\r\n { name: \"Masters in Fashion Design\", url: \"#\" },\r\n { name: \"Masters in Game Design\", url: \"#\" },\r\n { name: \"Masters in Graphic Design\", url: \"#\" },\r\n { name: \"Masters in Jewellery Design\", url: \"#\" },\r\n { name: \"Masters in Motion Graphics\", url: \"#\" },\r\n { name: \"Professional in Digital Marketing\", url: \"#\" },\r\n { name: \"Professional in Fashion Design\", url: \"#\" },\r\n { name: \"Professional in Graphic Design\", url: \"#\" },\r\n { name: \"Professional in UI UX \/ Motion graphics\", url: \"#\" },\r\n { name: \"Professional in UI UX Design\", url: \"#\" },\r\n { name: \"Masters in UI UX and Flutter\", url: \"#\" }\r\n ]},\r\n civil: { label: \"Civil Courses\", courses: [\r\n { name: \"Certified in Architecture\", url: \"#\" },\r\n { name: \"Certified in Structural Design & Analysics\", url: \"#\" },\r\n { name: \"Certified in 3ds Max\", url: \"#\" },\r\n { name: \"Certified in AutoCAD & sketch up\", url: \"#\" },\r\n { name: \"Certified in AutoCAD(CIVIL)\", url: \"#\" },\r\n { name: \"Certified in BIM\", url: \"#\" },\r\n { name: \"Certified in Interior design\", url: \"#\" },\r\n { name: \"Certified in Lumion\", url: \"#\" },\r\n { name: \"Certified in Navis work\", url: \"#\" },\r\n { name: \"Certified in Primavera P6\", url: \"#\" },\r\n { name: \"Certified in Revit\", url: \"#\" },\r\n { name: \"Certified in Revit Structural\", url: \"#\" },\r\n { name: \"Certified in Revit and Navis Work\", url: \"#\" },\r\n { name: \"Certified in Revit and Stadd pro\", url: \"#\" },\r\n { name: \"Certified in Sketchup with Lumion\", url: \"#\" },\r\n { name: \"Certified in Tekla Structures\", url: \"#\" },\r\n { name: \"Masters in Architecture\", url: \"#\" },\r\n { name: \"Masters in Interior design\", url: \"#\" },\r\n { name: \"Masters in Structural Design & Analysics\", url: \"#\" },\r\n { name: \"Masters in BIM\", url: \"#\" },\r\n { name: \"Masters in Revit\", url: \"#\" },\r\n { name: \"Professional in Architecture\", url: \"#\" },\r\n { name: \"Professional in Structural Design & Analysics\", url: \"#\" },\r\n { name: \"Professional in BIM\", url: \"#\" },\r\n { name: \"Professional in Interior design\", url: \"#\" },\r\n { name: \"Professional in Revit\", url: \"#\" },\r\n { name: \"Professional in structural design & Analytics with Sketchup\", url: \"#\" }\r\n ]}\r\n};\r\n\r\nfunction deptShow(dept, el) {\r\n var info = deptData[dept];\r\n var html = \"<h3>\" + info.label + \"<\/h3>\";\r\n\r\n if (info.courses.length === 0) {\r\n html += \"<p class=\\\"dept-placeholder\\\">(No course listed in your data)<\/p>\";\r\n } else {\r\n html += \"<ul>\";\r\n info.courses.forEach(function(c) {\r\n html += \"<li><a href=\\\"\" + c.url + \"\\\">\" + c.name + \"<\/a><\/li>\";\r\n });\r\n html += \"<\/ul>\";\r\n }\r\n\r\n document.getElementById(\"dept-content\").innerHTML = html;\r\n\r\n document.querySelectorAll(\".dept-btn\").forEach(function(b) {\r\n b.classList.remove(\"dept-active\");\r\n });\r\n el.classList.add(\"dept-active\");\r\n}\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n\r\n \/\/ Force remove padding\/margin from ALL parent elements of #dept-outer\r\n var el = document.getElementById(\"dept-outer\");\r\n var parent = el ? el.parentElement : null;\r\n while (parent && parent !== document.body) {\r\n parent.style.setProperty(\"max-width\", \"100%\", \"important\");\r\n parent.style.setProperty(\"padding-left\", \"0\", \"important\");\r\n parent.style.setProperty(\"padding-right\", \"0\", \"important\");\r\n parent.style.setProperty(\"margin-left\", \"0\", \"important\");\r\n parent.style.setProperty(\"margin-right\", \"0\", \"important\");\r\n parent.style.setProperty(\"width\", \"100%\", \"important\");\r\n parent = parent.parentElement;\r\n }\r\n\r\n var buttons = document.querySelectorAll(\".dept-btn\");\r\n buttons.forEach(function(btn) {\r\n btn.addEventListener(\"click\", function() {\r\n deptShow(btn.getAttribute(\"data-dept\"), btn);\r\n });\r\n });\r\n\r\n \/\/ Auto-select first department with correct font size from the start\r\n if (buttons.length > 0) {\r\n deptShow(\"multimedia\", buttons[0]);\r\n }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\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>Department Courses Department List of Courses Multimedia & Creative SAP Civil Select a department to view courses<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":"","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":""}},"footnotes":""},"class_list":["post-256","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/pages\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=256"}],"version-history":[{"count":55,"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/pages\/256\/revisions"}],"predecessor-version":[{"id":796,"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/pages\/256\/revisions\/796"}],"wp:attachment":[{"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\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\nDepartment Courses<\/title>\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n\r\n* {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n font-family: 'Sora', Arial, sans-serif;\r\n}\r\n\r\n\/* FULL PAGE YELLOW BACKGROUND *\/\r\nhtml, body {\r\n width: 100%;\r\n min-height: 100vh;\r\n background: #f0a500;\r\n}\r\n\r\n\/* PAGE WRAPPER - full width *\/\r\n#dept-outer {\r\n width: 100% !important;\r\n max-width: 100% !important;\r\n margin: 0 !important;\r\n padding: 0 0 60px 0;\r\n}\r\n\r\n\/* HEADER *\/\r\n\r\n.header {\r\n height: 110px;\r\n background: white;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n margin: 0 20px 30px 20px; \/* gap control here *\/\r\n box-sizing: border-box;\r\n border-radius: 14px;\r\n box-shadow: 0 8px 24px rgba(0,0,0,.15);\r\n}\r\n\r\n\r\n\r\n\r\n.header img {\r\n max-width: 100%;\r\n max-height: 80px;\r\n object-fit: contain;\r\n}\r\n\r\n\/* HEADINGS *\/\r\n#dept-headings {\r\n display: flex;\r\n gap: 28px;\r\n margin-bottom: 20px;\r\n padding: 0 40px;\r\n}\r\n\r\n#dept-headings h2 {\r\n font-family: 'Sora', Arial, sans-serif;\r\n font-size: 35px;\r\n font-weight: 800;\r\n letter-spacing: -0.01em;\r\n color: #1a1a2e !important;\r\n text-align: center;\r\n text-shadow:\r\n 3px 4px 4px rgba(0,0,0,.23);\r\n animation: deptFadeUp 0.6s ease both;\r\n}\r\n\r\n#dept-headings h2:first-child { flex: 1; }\r\n#dept-headings h2:last-child { flex: 1; }\r\n\r\n\/* MAIN WRAPPER *\/\r\n#dept-wrapper {\r\n display: flex !important;\r\n gap: 28px;\r\n align-items: stretch;\r\n padding: 0 40px;\r\n}\r\n\r\n\/* LEFT SIDE *\/\r\n#dept-sidebar {\r\n flex: 1;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n}\r\n\r\n\/* BUTTONS *\/\r\n.dept-btn {\r\n display: block !important;\r\n width: 100% !important;\r\n padding: 47px 20px !important;\r\n background: linear-gradient(135deg, #1a1a2e 0%, #232348 100%) !important;\r\n border-radius: 0 !important;\r\n border: 3px solid white !important;\r\n text-align: center !important;\r\n font-family: 'Sora', Arial, sans-serif !important;\r\n font-size: 20px !important;\r\n font-weight: 600 !important;\r\n color: #ffffff !important;\r\n cursor: pointer !important;\r\n letter-spacing: 0.02em !important;\r\n position: relative !important;\r\n overflow: hidden !important;\r\n transition: transform 0.3s cubic-bezier(.2,.8,.2,1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease !important;\r\n animation: deptFadeLeft 0.5s ease both;\r\n}\r\n\r\n.dept-btn::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: -75%;\r\n width: 50%;\r\n height: 100%;\r\n background: linear-gradient(120deg, transparent, rgba(255,255,255,.25), transparent);\r\n transform: skewX(-20deg);\r\n transition: left 0.6s ease;\r\n}\r\n\r\n.dept-btn:hover::after {\r\n left: 125%;\r\n}\r\n\r\n.dept-btn:nth-child(1) { animation-delay: 0.05s; }\r\n.dept-btn:nth-child(2) { animation-delay: 0.1s; }\r\n.dept-btn:nth-child(3) { animation-delay: 0.15s; }\r\n.dept-btn:nth-child(4) { animation-delay: 0.2s; }\r\n.dept-btn:nth-child(5) { animation-delay: 0.25s; }\r\n\r\n.dept-btn:hover {\r\n background: linear-gradient(135deg, #f0b400 0%, #f7c948 100%) !important;\r\n color: #1a1a2e !important;\r\n transform: translateY(-4px) scale(1.015);\r\n box-shadow: 0 14px 28px rgba(0,0,0,.22) !important;\r\n}\r\n\r\n.dept-btn.dept-active {\r\n background: linear-gradient(135deg, orange 0%, #ffb733 100%) !important;\r\n color: #1a1a2e !important;\r\n transform: translateY(-2px);\r\n box-shadow: 0 12px 24px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.4) !important;\r\n}\r\n\r\n\/* RIGHT SIDE *\/\r\n#dept-content {\r\n flex: 1 !important;\r\n background: #ffffff !important;\r\n border-radius: 12px !important;\r\n padding: 28px 32px !important;\r\n\r\nheight: 570px;\r\n overflow-y: auto;\r\n overflow-x: hidden;\r\n\r\n box-shadow: 0 10px 30px rgba(0,0,0,.12);\r\n animation: deptFadeUp 0.6s ease 0.15s both;\r\n display: flex;\r\n flex-direction: column;\r\n}\r\n\r\n#dept-content::-webkit-scrollbar {\r\n width: 8px;\r\n}\r\n#dept-content::-webkit-scrollbar-track {\r\n background: #f4f4f4;\r\n border-radius: 8px;\r\n}\r\n#dept-content::-webkit-scrollbar-thumb {\r\n background: #f0a500;\r\n border-radius: 8px;\r\n}\r\n#dept-content::-webkit-scrollbar-thumb:hover {\r\n background: #d68f00;\r\n}\r\n\r\n#dept-content h3 {\r\n font-family: 'Sora', Arial, sans-serif;\r\n font-size: 18px !important;\r\n font-weight: 700 !important;\r\n color: #1a1a2e !important;\r\n margin-bottom: 18px !important;\r\n}\r\n\r\n#dept-content ul {\r\n list-style: disc !important;\r\n padding-left: 20px !important;\r\n}\r\n\r\n#dept-content ul li {\r\n padding: 5px 0 !important;\r\n line-height: 1.6 !important;\r\n padding-left: 10px !important;\r\n transition: transform 0.25s ease !important;\r\n animation: deptItemIn 0.35s ease both;\r\n}\r\n\r\n#dept-content ul li:hover {\r\n transform: translateX(4px) !important;\r\n}\r\n\r\n#dept-content ul li a {\r\n font-family: 'Sora', Arial, sans-serif;\r\n font-size: 15px !important;\r\n color: #1a73e8 !important;\r\n font-weight: 500 !important;\r\n text-decoration: none !important;\r\n transition: color 0.2s ease !important;\r\n}\r\n\r\n#dept-content ul li a:hover {\r\n color: #f0a500 !important;\r\n text-decoration: underline !important;\r\n}\r\n\r\n.dept-placeholder {\r\n font-family: 'Sora', Arial, sans-serif;\r\n color: #aaa !important;\r\n font-size: 15px !important;\r\n margin-top: 40px !important;\r\n text-align: center !important;\r\n}\r\n\r\n\/* Kill WordPress parent container padding\/max-width *\/\r\n.elementor-widget-html,\r\n.elementor-widget-container,\r\n.elementor-column-wrap,\r\n.elementor-widget-wrap,\r\n.elementor-section,\r\n.elementor-container,\r\n.e-con,\r\n.e-con-inner,\r\n.entry-content,\r\n.site-content,\r\n.page-content,\r\nmain, article {\r\n max-width: 100% !important;\r\n padding-left: 0 !important;\r\n padding-right: 0 !important;\r\n margin-left: 0 !important;\r\n margin-right: 0 !important;\r\n}\r\n\r\n\/* RESPONSIVE *\/\r\n@media (max-width: 750px) {\r\n #dept-headings, #dept-wrapper {\r\n flex-direction: column !important;\r\n padding: 0 16px;\r\n }\r\n\r\n #dept-sidebar {\r\n flex: unset !important;\r\n width: 100% !important;\r\n }\r\n}\r\n\r\n\r\n#dept-content h3 {\r\n display: none !important;\r\n}\r\n\r\n@keyframes deptFadeUp {\r\n from { opacity: 0; transform: translateY(14px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n\r\n@keyframes deptFadeLeft {\r\n from { opacity: 0; transform: translateX(-14px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n}\r\n\r\n@keyframes deptItemIn {\r\n from { opacity: 0; transform: translateY(6px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n}\r\n<\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<div id=\"dept-outer\">\r\n\r\n \r\n \r\n \r\n \r\n <div class=\"header\">\r\n <img decoding=\"async\" src=\"https:\/\/app.pumotechnovationcrm.com\/wp-content\/uploads\/2026\/06\/logo.jpg\" alt=\"Pumo Technovation Logo\">\r\n <\/div>\r\n\r\n\r\n <div id=\"dept-headings\">\r\n <h2>Department<\/h2>\r\n <h2>List of Courses<\/h2>\r\n <\/div>\r\n\r\n <div id=\"dept-wrapper\">\r\n\r\n <div id=\"dept-sidebar\">\r\n <button class=\"dept-btn\" data-dept=\"multimedia\">Multimedia & Creative<\/button>\r\n <button class=\"dept-btn\" data-dept=\"sap\">SAP<\/button>\r\n <button class=\"dept-btn\" data-dept=\"civil\">Civil<\/button>\r\n <\/div>\r\n\r\n <div id=\"dept-content\">\r\n <p class=\"dept-placeholder\">Select a department to view courses<\/p>\r\n <\/div>\r\n\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/*\r\n ============================================================\r\n IMPORTANT: Fill in the \"url\" field for every course below.\r\n Replace \"#\" with the actual live page link for that course.\r\n Example:\r\n { name: \"Certified in SAP FICO\", url: \"http:\/\/localhost:8080\/wordpress-7.0\/demo\/sap-fico\/\" }\r\n ============================================================\r\n*\/\r\nvar deptData = {\r\n sap: { label: \"SAP Courses\", courses: [\r\n { name: \"Certified in SAP FICO\", url: \"#\" },\r\n { name: \"Certified in SAP MM\", url: \"#\" },\r\n { name: \"Certified in SAP MM & EWM\", url: \"#\" },\r\n { name: \"Certified in SAP MM & PP\", url: \"#\" },\r\n { name: \"Certified in SAP PP\", url: \"#\" },\r\n { name: \"Certified in SAP SD\", url: \"#\" },\r\n { name: \"Certified in SAP SUCCESS FACTOR\", url: \"#\" },\r\n { name: \"Masters in SAP ABAP\", url: \"#\" },\r\n { name: \"Masters in SAP BASIS\", url: \"#\" },\r\n { name: \"Masters in SAP FICO\", url: \"#\" },\r\n { name: \"Masters in SAP MM\", url: \"#\" },\r\n { name: \"Masters in SAP PP\", url: \"#\" },\r\n { name: \"Masters in SAP SCM\", url: \"#\" },\r\n { name: \"Masters in SAP SD\", url: \"#\" },\r\n { name: \"Professional in SAP ABAP\", url: \"#\" },\r\n { name: \"Professional in SAP BASIS\", url: \"#\" },\r\n { name: \"Professional in SAP FICO\", url: \"#\" },\r\n { name: \"Professional in SAP MM\", url: \"#\" },\r\n { name: \"Professional in SAP PP\", url: \"#\" },\r\n { name: \"Professional in SAP SD\", url: \"#\" }\r\n ]},\r\n multimedia: { label: \"Multimedia & Creative Courses\", courses: [\r\n { name: \"Certified in 3D-Animation\", url: \"#\" },\r\n { name: \"Certified in AR\/VR\", url: \"#\" },\r\n { name: \"Certified in Adobe Premiere Pro\", url: \"#\" },\r\n { name: \"Certified in Blender\", url: \"#\" },\r\n { name: \"Certified in Composting\", url: \"#\" },\r\n { name: \"Certified in CorelDraw\", url: \"#\" },\r\n { name: \"Certified in Digital Marketing\", url: \"#\" },\r\n { name: \"Certified in Digital marketing (SMM, SEM)\", url: \"#\" },\r\n { name: \"Certified in Fashion Design\", url: \"#\" },\r\n { name: \"Certified in Figma\", url: \"#\" },\r\n { name: \"Certified in Flutter\", url: \"#\" },\r\n { name: \"Certified in Game Design\", url: \"#\" },\r\n { name: \"Certified in Graphic Design\", url: \"#\" },\r\n { name: \"Certified in Jewellery Design\", url: \"#\" },\r\n { name: \"Certified in Maya\", url: \"#\" },\r\n { name: \"Certified in Motion Graphics\", url: \"#\" },\r\n { name: \"Certified in Photography\", url: \"#\" },\r\n { name: \"Certified in Photoshop\", url: \"#\" },\r\n { name: \"Certified in UI UX Design\", url: \"#\" },\r\n { name: \"Certified in UnrealEngine\", url: \"#\" },\r\n { name: \"Certified in VFX\", url: \"#\" },\r\n { name: \"Certified in Video Editing (premier Pro and after effects)\", url: \"#\" },\r\n { name: \"Certified in ZBrush\", url: \"#\" },\r\n { name: \"Master in AR\/VR\", url: \"#\" },\r\n { name: \"Master in UI UX Design\", url: \"#\" },\r\n { name: \"Master in VFX\", url: \"#\" },\r\n { name: \"Masters in 3D Animation\", url: \"#\" },\r\n { name: \"Masters in Digital Marketing\", url: \"#\" },\r\n { name: \"Masters in Digital Marketing with Creative Design (Graphics Design + Video Editing)\", url: \"#\" },\r\n { name: \"Masters in Fashion Design\", url: \"#\" },\r\n { name: \"Masters in Game Design\", url: \"#\" },\r\n { name: \"Masters in Graphic Design\", url: \"#\" },\r\n { name: \"Masters in Jewellery Design\", url: \"#\" },\r\n { name: \"Masters in Motion Graphics\", url: \"#\" },\r\n { name: \"Professional in Digital Marketing\", url: \"#\" },\r\n { name: \"Professional in Fashion Design\", url: \"#\" },\r\n { name: \"Professional in Graphic Design\", url: \"#\" },\r\n { name: \"Professional in UI UX \/ Motion graphics\", url: \"#\" },\r\n { name: \"Professional in UI UX Design\", url: \"#\" },\r\n { name: \"Masters in UI UX and Flutter\", url: \"#\" }\r\n ]},\r\n civil: { label: \"Civil Courses\", courses: [\r\n { name: \"Certified in Architecture\", url: \"#\" },\r\n { name: \"Certified in Structural Design & Analysics\", url: \"#\" },\r\n { name: \"Certified in 3ds Max\", url: \"#\" },\r\n { name: \"Certified in AutoCAD & sketch up\", url: \"#\" },\r\n { name: \"Certified in AutoCAD(CIVIL)\", url: \"#\" },\r\n { name: \"Certified in BIM\", url: \"#\" },\r\n { name: \"Certified in Interior design\", url: \"#\" },\r\n { name: \"Certified in Lumion\", url: \"#\" },\r\n { name: \"Certified in Navis work\", url: \"#\" },\r\n { name: \"Certified in Primavera P6\", url: \"#\" },\r\n { name: \"Certified in Revit\", url: \"#\" },\r\n { name: \"Certified in Revit Structural\", url: \"#\" },\r\n { name: \"Certified in Revit and Navis Work\", url: \"#\" },\r\n { name: \"Certified in Revit and Stadd pro\", url: \"#\" },\r\n { name: \"Certified in Sketchup with Lumion\", url: \"#\" },\r\n { name: \"Certified in Tekla Structures\", url: \"#\" },\r\n { name: \"Masters in Architecture\", url: \"#\" },\r\n { name: \"Masters in Interior design\", url: \"#\" },\r\n { name: \"Masters in Structural Design & Analysics\", url: \"#\" },\r\n { name: \"Masters in BIM\", url: \"#\" },\r\n { name: \"Masters in Revit\", url: \"#\" },\r\n { name: \"Professional in Architecture\", url: \"#\" },\r\n { name: \"Professional in Structural Design & Analysics\", url: \"#\" },\r\n { name: \"Professional in BIM\", url: \"#\" },\r\n { name: \"Professional in Interior design\", url: \"#\" },\r\n { name: \"Professional in Revit\", url: \"#\" },\r\n { name: \"Professional in structural design & Analytics with Sketchup\", url: \"#\" }\r\n ]}\r\n};\r\n\r\nfunction deptShow(dept, el) {\r\n var info = deptData[dept];\r\n var html = \"<h3>\" + info.label + \"<\/h3>\";\r\n\r\n if (info.courses.length === 0) {\r\n html += \"<p class=\\\"dept-placeholder\\\">(No course listed in your data)<\/p>\";\r\n } else {\r\n html += \"<ul>\";\r\n info.courses.forEach(function(c) {\r\n html += \"<li><a href=\\\"\" + c.url + \"\\\">\" + c.name + \"<\/a><\/li>\";\r\n });\r\n html += \"<\/ul>\";\r\n }\r\n\r\n document.getElementById(\"dept-content\").innerHTML = html;\r\n\r\n document.querySelectorAll(\".dept-btn\").forEach(function(b) {\r\n b.classList.remove(\"dept-active\");\r\n });\r\n el.classList.add(\"dept-active\");\r\n}\r\n\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n\r\n \/\/ Force remove padding\/margin from ALL parent elements of #dept-outer\r\n var el = document.getElementById(\"dept-outer\");\r\n var parent = el ? el.parentElement : null;\r\n while (parent && parent !== document.body) {\r\n parent.style.setProperty(\"max-width\", \"100%\", \"important\");\r\n parent.style.setProperty(\"padding-left\", \"0\", \"important\");\r\n parent.style.setProperty(\"padding-right\", \"0\", \"important\");\r\n parent.style.setProperty(\"margin-left\", \"0\", \"important\");\r\n parent.style.setProperty(\"margin-right\", \"0\", \"important\");\r\n parent.style.setProperty(\"width\", \"100%\", \"important\");\r\n parent = parent.parentElement;\r\n }\r\n\r\n var buttons = document.querySelectorAll(\".dept-btn\");\r\n buttons.forEach(function(btn) {\r\n btn.addEventListener(\"click\", function() {\r\n deptShow(btn.getAttribute(\"data-dept\"), btn);\r\n });\r\n });\r\n\r\n \/\/ Auto-select first department with correct font size from the start\r\n if (buttons.length > 0) {\r\n deptShow(\"multimedia\", buttons[0]);\r\n }\r\n});\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\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>Department Courses Department List of Courses Multimedia & Creative SAP Civil Select a department to view courses<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"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":"","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":""}},"footnotes":""},"class_list":["post-256","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/pages\/256","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=256"}],"version-history":[{"count":55,"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/pages\/256\/revisions"}],"predecessor-version":[{"id":796,"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=\/wp\/v2\/pages\/256\/revisions\/796"}],"wp:attachment":[{"href":"https:\/\/app.pumotechnovationcrm.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=256"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}