{"id":50557,"date":"2024-08-18T19:42:10","date_gmt":"2024-08-18T19:42:10","guid":{"rendered":"http:\/\/155.0.14.112\/?page_id=50557"},"modified":"2026-08-25T13:52:58","modified_gmt":"2026-08-25T13:52:58","slug":"50557-2","status":"publish","type":"page","link":"https:\/\/www.nipa.ac.zm\/index.php\/50557-2\/","title":{"rendered":"library-services"},"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
\n\t\t\t\t\t\n\n\n \n \n Library Services \u2726 NIPA<\/title>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\" \/>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\" \/>\n <style>\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: \"Inter\", sans-serif;\n min-height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 24px;\n background: #f0f4f2;\n background-image:\n radial-gradient(ellipse at 10% 20%, rgba(244, 111, 54, 0.04) 0%, transparent 60%),\n radial-gradient(ellipse at 90% 80%, rgba(2, 111, 61, 0.04) 0%, transparent 50%),\n radial-gradient(ellipse at 50% 50%, rgba(244, 111, 54, 0.02) 0%, transparent 70%);\n transition: background 0.6s ease;\n cursor: default;\n }\n\n .particle {\n position: fixed;\n width: 4px;\n height: 4px;\n background: rgba(244, 111, 54, 0.15);\n border-radius: 50%;\n pointer-events: none;\n animation: floatParticle 20s infinite linear;\n }\n\n .particle:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; width: 6px; height: 6px; }\n .particle:nth-child(2) { top: 30%; left: 95%; animation-delay: 3s; width: 4px; height: 4px; }\n .particle:nth-child(3) { top: 60%; left: 2%; animation-delay: 6s; width: 5px; height: 5px; }\n .particle:nth-child(4) { top: 80%; left: 90%; animation-delay: 9s; width: 3px; height: 3px; }\n .particle:nth-child(5) { top: 50%; left: 50%; animation-delay: 12s; width: 7px; height: 7px; }\n\n @keyframes floatParticle {\n 0% { transform: translate(0, 0) scale(0); opacity: 0; }\n 10% { opacity: 1; }\n 90% { opacity: 1; }\n 100% { transform: translate(100px, -200px) scale(1); opacity: 0; }\n }\n\n .card {\n background: rgba(255, 255, 255, 0.92);\n backdrop-filter: blur(20px) saturate(1.2);\n -webkit-backdrop-filter: blur(20px) saturate(1.2);\n border-radius: 24px;\n border: 1px solid rgba(255, 255, 255, 0.6);\n box-shadow: \n 0 20px 60px rgba(0, 0, 0, 0.04),\n 0 8px 24px rgba(0, 0, 0, 0.02),\n inset 0 1px 0 rgba(255, 255, 255, 0.8);\n width: 100%;\n max-width: 880px;\n padding: 36px 40px 30px;\n animation: cardFadeIn 0.8s ease forwards;\n position: relative;\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n z-index: 1;\n }\n\n @keyframes cardFadeIn {\n 0% { opacity: 0; transform: translateY(30px) scale(0.97); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n .card:hover {\n box-shadow: \n 0 30px 80px rgba(244, 111, 54, 0.10),\n 0 15px 40px rgba(244, 111, 54, 0.05),\n 0 0 100px rgba(244, 111, 54, 0.04),\n inset 0 1px 0 rgba(255, 255, 255, 0.9);\n transform: translateY(-6px) scale(1.005);\n border-color: rgba(244, 111, 54, 0.08);\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .card::before {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 26px;\n background: linear-gradient(135deg, \n rgba(244, 111, 54, 0.3), \n rgba(2, 111, 61, 0.15), \n rgba(244, 111, 54, 0.3),\n rgba(3, 152, 85, 0.1),\n rgba(244, 111, 54, 0.3)\n );\n background-size: 300% 300%;\n z-index: -1;\n animation: gradientBorder 6s ease-in-out infinite;\n opacity: 0;\n padding: 2px;\n -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);\n -webkit-mask-composite: xor;\n mask-composite: exclude;\n transition: opacity 0.8s ease;\n pointer-events: none;\n }\n\n .card:hover::before {\n opacity: 1;\n animation: gradientBorder 4s ease-in-out infinite;\n }\n\n @keyframes gradientBorder {\n 0%, 100% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n }\n\n .card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 120px;\n height: 3px;\n background: linear-gradient(90deg, transparent, #026F3D, #039855, transparent);\n border-radius: 0 0 4px 4px;\n transition: all 0.8s ease;\n z-index: 2;\n }\n\n .card:hover::after {\n width: 180px;\n background: linear-gradient(90deg, transparent, #f46f36, #026F3D, #f46f36, transparent);\n box-shadow: 0 0 40px rgba(244, 111, 54, 0.15);\n }\n\n \/* Header *\/\n .header {\n display: flex;\n align-items: center;\n gap: 18px;\n margin-bottom: 22px;\n animation: fadeSlideUp 0.7s ease 0.1s both;\n position: relative;\n z-index: 3;\n }\n\n @keyframes fadeSlideUp {\n 0% { opacity: 0; transform: translateY(20px); }\n 100% { opacity: 1; transform: translateY(0); }\n }\n\n .header-icon-wrapper {\n position: relative;\n flex-shrink: 0;\n cursor: pointer;\n }\n\n .header-icon-wrapper::before {\n content: '';\n position: absolute;\n inset: -8px;\n border-radius: 18px;\n background: linear-gradient(135deg, rgba(244, 111, 54, 0.08), rgba(2, 111, 61, 0.08));\n filter: blur(20px);\n animation: iconGlowPulse 4s ease-in-out infinite;\n transition: all 0.6s ease;\n z-index: 0;\n }\n\n .header-icon-wrapper:hover::before {\n background: linear-gradient(135deg, rgba(244, 111, 54, 0.15), rgba(2, 111, 61, 0.10));\n filter: blur(30px);\n transform: scale(1.2);\n }\n\n @keyframes iconGlowPulse {\n 0%, 100% { opacity: 0.3; transform: scale(1); }\n 50% { opacity: 0.8; transform: scale(1.1); }\n }\n\n .header-icon {\n width: 52px;\n height: 52px;\n background: linear-gradient(145deg, #026F3D, #039855);\n border-radius: 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #fff;\n font-size: 24px;\n box-shadow: 0 8px 24px rgba(2, 111, 61, 0.2);\n position: relative;\n z-index: 1;\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .header-icon:active {\n transform: scale(0.9);\n transition: all 0.1s ease;\n }\n\n .header-icon-wrapper:hover .header-icon {\n transform: scale(1.1) rotate(-6deg);\n box-shadow: \n 0 12px 40px rgba(244, 111, 54, 0.35),\n 0 0 60px rgba(244, 111, 54, 0.08);\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .header-text h1 {\n font-family: \"Playfair Display\", serif;\n font-size: 28px;\n font-weight: 700;\n color: #0d1a16;\n line-height: 1.1;\n transition: color 0.4s ease;\n }\n\n .header-text h1 span {\n background: linear-gradient(135deg, #026F3D, #039855);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n transition: all 0.4s ease;\n }\n\n .header:hover .header-text h1 span {\n background: linear-gradient(135deg, #f46f36, #d45a2a);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n }\n\n .header-text .sub {\n font-size: 11px;\n font-weight: 600;\n color: #1a2e2a;\n letter-spacing: 1.2px;\n text-transform: uppercase;\n transition: color 0.4s ease;\n }\n\n .header-text .sub .accent {\n color: #f46f36;\n }\n\n \/* Services Grid *\/\n .services-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 16px;\n margin-bottom: 24px;\n animation: fadeSlideUp 0.7s ease 0.15s both;\n position: relative;\n z-index: 3;\n }\n\n \/* ===== SERVICE CARD WITH MOTION ON HOVER ===== *\/\n .service-card {\n padding: 16px 18px;\n background: rgba(255, 255, 255, 0.7);\n backdrop-filter: blur(10px);\n -webkit-backdrop-filter: blur(10px);\n border-radius: 12px;\n border: 1px solid rgba(2, 111, 61, 0.06);\n border-left: 4px solid #026F3D;\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n position: relative;\n overflow: hidden;\n opacity: 0;\n animation: cardReveal 0.6s ease forwards;\n cursor: pointer;\n z-index: 3;\n will-change: transform;\n }\n\n .service-card:nth-child(1) { animation-delay: 0.2s; }\n .service-card:nth-child(2) { animation-delay: 0.28s; }\n .service-card:nth-child(3) { animation-delay: 0.36s; }\n .service-card:nth-child(4) { animation-delay: 0.44s; }\n .service-card:nth-child(5) { animation-delay: 0.52s; }\n .service-card:nth-child(6) { animation-delay: 0.6s; }\n .service-card:nth-child(7) { animation-delay: 0.68s; }\n .service-card:nth-child(8) { animation-delay: 0.76s; }\n\n @keyframes cardReveal {\n 0% { opacity: 0; transform: translateY(20px) scale(0.96); }\n 100% { opacity: 1; transform: translateY(0) scale(1); }\n }\n\n .service-card .ripple {\n position: absolute;\n border-radius: 50%;\n background: rgba(244, 111, 54, 0.15);\n transform: scale(0);\n animation: rippleAnim 0.8s ease-out forwards;\n pointer-events: none;\n z-index: 10;\n }\n\n @keyframes rippleAnim {\n 0% { transform: scale(0); opacity: 1; }\n 100% { transform: scale(4); opacity: 0; }\n }\n\n .service-card::before {\n content: '';\n position: absolute;\n inset: 0;\n background: radial-gradient(circle at center, rgba(244, 111, 54, 0.06), transparent 70%);\n opacity: 0;\n transition: opacity 0.6s ease;\n pointer-events: none;\n z-index: 0;\n }\n\n .service-card::after {\n content: '';\n position: absolute;\n inset: -3px;\n border-radius: 14px;\n background: linear-gradient(135deg, \n rgba(244, 111, 54, 0.08), \n rgba(2, 111, 61, 0.04), \n rgba(244, 111, 54, 0.08)\n );\n z-index: -2;\n opacity: 0;\n transition: all 0.6s ease;\n filter: blur(20px);\n pointer-events: none;\n }\n\n \/* ===== MOTION ON HOVER ===== *\/\n .service-card:hover {\n background: rgba(255, 248, 245, 0.9);\n border-color: rgba(244, 111, 54, 0.2);\n border-left-color: #f46f36;\n transform: translateY(-8px) scale(1.02) rotateX(2deg);\n box-shadow: \n 0 16px 50px rgba(244, 111, 54, 0.12),\n 0 0 80px rgba(244, 111, 54, 0.04),\n 0 0 120px rgba(244, 111, 54, 0.02);\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .service-card:active {\n transform: scale(0.95) rotateX(0deg);\n transition: all 0.1s ease;\n }\n\n .service-card:hover::before {\n opacity: 1;\n transition: opacity 0.6s ease;\n }\n\n .service-card:hover::after {\n opacity: 1;\n transform: scale(1.06);\n transition: all 0.6s ease;\n }\n\n .service-card * {\n position: relative;\n z-index: 2;\n }\n\n \/* Icon motion *\/\n .service-card .service-icon {\n display: inline-flex;\n width: 32px;\n height: 32px;\n background: rgba(2, 111, 61, 0.06);\n border-radius: 8px;\n align-items: center;\n justify-content: center;\n color: #026F3D;\n font-size: 14px;\n margin-right: 8px;\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n flex-shrink: 0;\n }\n\n .service-card:hover .service-icon {\n background: rgba(244, 111, 54, 0.12);\n color: #f46f36;\n transform: scale(1.15) rotate(-8deg) translateX(-4px);\n box-shadow: 0 0 30px rgba(244, 111, 54, 0.08);\n }\n\n \/* Name motion *\/\n .service-card .service-name {\n font-size: 14px;\n font-weight: 600;\n color: #0d1a16;\n display: flex;\n align-items: center;\n gap: 4px;\n transition: all 0.4s ease;\n }\n\n .service-card:hover .service-name {\n color: #026F3D;\n transform: translateX(4px);\n }\n\n \/* Description motion *\/\n .service-card .service-desc {\n font-size: 11px;\n color: #1a2e2a;\n line-height: 1.5;\n margin-top: 2px;\n padding-left: 42px;\n font-weight: 400;\n transition: all 0.5s ease;\n }\n\n .service-card:hover .service-desc {\n color: #0d1a16;\n transform: translateX(4px);\n }\n\n .service-card .service-desc a {\n color: #026F3D;\n text-decoration: none;\n transition: all 0.3s ease;\n }\n\n .service-card .service-desc a:hover {\n color: #f46f36;\n }\n\n \/* Section Title *\/\n .section-title {\n font-family: \"Playfair Display\", serif;\n font-size: 18px;\n font-weight: 700;\n color: #0d1a16;\n margin: 22px 0 14px 0;\n display: flex;\n align-items: center;\n gap: 10px;\n animation: fadeSlideUp 0.7s ease 0.1s both;\n position: relative;\n z-index: 3;\n flex-wrap: wrap;\n }\n\n .section-title i {\n color: #f46f36;\n font-size: 16px;\n background: rgba(244, 111, 54, 0.08);\n padding: 6px;\n border-radius: 50%;\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n flex-shrink: 0;\n }\n\n .section-title:hover i {\n transform: scale(1.2) rotate(-10deg);\n background: rgba(244, 111, 54, 0.15);\n box-shadow: 0 0 40px rgba(244, 111, 54, 0.08);\n }\n\n .section-title .title-line {\n flex: 1;\n height: 1px;\n background: linear-gradient(90deg, rgba(2, 111, 61, 0.1), transparent);\n min-width: 20px;\n }\n\n \/* American Corner Section - GREEN & ORANGE *\/\n .american-section {\n background: linear-gradient(135deg, rgba(2, 111, 61, 0.05), rgba(244, 111, 54, 0.03));\n border-radius: 14px;\n padding: 20px 24px;\n border: 1px solid rgba(2, 111, 61, 0.08);\n border-left: 5px solid #026F3D;\n margin-bottom: 24px;\n animation: fadeSlideUp 0.7s ease 0.2s both;\n position: relative;\n z-index: 3;\n transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n box-shadow: 0 2px 16px rgba(2, 111, 61, 0.03);\n }\n\n .american-section:hover {\n background: linear-gradient(135deg, rgba(2, 111, 61, 0.08), rgba(244, 111, 54, 0.05));\n border-color: rgba(244, 111, 54, 0.12);\n border-left-color: #f46f36;\n box-shadow: \n 0 8px 40px rgba(244, 111, 54, 0.06),\n 0 0 60px rgba(244, 111, 54, 0.02);\n transform: translateY(-3px);\n }\n\n .american-section .american-title {\n font-family: \"Playfair Display\", serif;\n font-size: 16px;\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 8px;\n color: #026F3D;\n transition: all 0.4s ease;\n flex-wrap: wrap;\n }\n\n .american-section:hover .american-title {\n color: #f46f36;\n transform: translateX(4px);\n }\n\n .american-section .american-title i {\n font-size: 18px;\n color: #f46f36;\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n flex-shrink: 0;\n }\n\n .american-section:hover .american-title i {\n color: #f46f36;\n transform: scale(1.15) rotate(-8deg);\n }\n\n .american-section .american-desc {\n font-size: 12px;\n color: #1a2e2a;\n line-height: 1.7;\n }\n\n .american-section .american-desc strong {\n color: #026F3D;\n font-weight: 700;\n transition: color 0.4s ease;\n }\n\n .american-section:hover .american-desc strong {\n color: #f46f36;\n }\n\n \/* American Corner Grid *\/\n .american-grid {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n margin-top: 10px;\n position: relative;\n z-index: 3;\n }\n\n .american-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 8px 12px;\n background: rgba(255, 255, 255, 0.6);\n border-radius: 8px;\n border: 1px solid rgba(2, 111, 61, 0.04);\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n cursor: pointer;\n position: relative;\n z-index: 3;\n will-change: transform;\n }\n\n .american-item:hover {\n background: rgba(255, 248, 245, 0.8);\n border-color: rgba(244, 111, 54, 0.15);\n transform: translateX(8px) scale(1.02) rotateY(2deg);\n box-shadow: 0 4px 20px rgba(244, 111, 54, 0.06);\n }\n\n .american-item i {\n color: #026F3D;\n font-size: 12px;\n width: 18px;\n text-align: center;\n flex-shrink: 0;\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .american-item:hover i {\n color: #f46f36;\n transform: scale(1.2) rotate(-10deg);\n }\n\n .american-item span {\n font-size: 12px;\n color: #1a2e2a;\n font-weight: 500;\n transition: all 0.4s ease;\n }\n\n .american-item:hover span {\n color: #f46f36;\n transform: translateX(4px);\n }\n\n \/* Public Notice - GREEN *\/\n .public-notice {\n font-size: 13px;\n color: #0d1a16;\n background: linear-gradient(135deg, rgba(2, 111, 61, 0.05), rgba(2, 111, 61, 0.02));\n padding: 16px 20px;\n border-radius: 12px;\n border: 1px solid rgba(2, 111, 61, 0.12);\n border-left: 5px solid #026F3D;\n text-align: center;\n margin-bottom: 22px;\n animation: fadeSlideUp 0.7s ease 0.6s both;\n position: relative;\n z-index: 3;\n transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n box-shadow: 0 2px 16px rgba(2, 111, 61, 0.04);\n }\n\n .public-notice:hover {\n background: linear-gradient(135deg, rgba(2, 111, 61, 0.08), rgba(2, 111, 61, 0.03));\n border-color: rgba(2, 111, 61, 0.2);\n transform: translateY(-4px) scale(1.008);\n box-shadow: \n 0 12px 40px rgba(2, 111, 61, 0.08),\n 0 0 60px rgba(2, 111, 61, 0.03);\n }\n\n .public-notice::before {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 14px;\n background: linear-gradient(135deg, \n rgba(2, 111, 61, 0.08), \n rgba(3, 152, 85, 0.04), \n rgba(2, 111, 61, 0.08)\n );\n z-index: -1;\n opacity: 0;\n transition: all 0.6s ease;\n filter: blur(15px);\n pointer-events: none;\n }\n\n .public-notice:hover::before {\n opacity: 1;\n transform: scale(1.04);\n }\n\n .public-notice .notice-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n background: rgba(2, 111, 61, 0.08);\n border-radius: 50%;\n color: #026F3D;\n font-size: 16px;\n margin-right: 10px;\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n flex-shrink: 0;\n }\n\n .public-notice:hover .notice-icon {\n background: rgba(2, 111, 61, 0.12);\n transform: scale(1.1) rotate(-10deg);\n box-shadow: 0 0 30px rgba(2, 111, 61, 0.06);\n }\n\n .public-notice .notice-text {\n font-weight: 500;\n line-height: 1.6;\n }\n\n .public-notice .notice-text strong {\n color: #026F3D;\n font-weight: 700;\n transition: color 0.4s ease;\n }\n\n .public-notice:hover .notice-text strong {\n color: #f46f36;\n }\n\n .public-notice .notice-icon i {\n transition: all 0.5s ease;\n }\n\n .public-notice:hover .notice-icon i {\n color: #f46f36;\n }\n\n \/* Footer *\/\n .footer {\n display: flex;\n justify-content: center;\n align-items: center;\n flex-wrap: wrap;\n gap: 16px;\n padding-top: 18px;\n border-top: 2px solid rgba(2, 111, 61, 0.04);\n animation: fadeSlideUp 0.7s ease 0.8s both;\n transition: all 0.5s ease;\n position: relative;\n z-index: 3;\n }\n\n .footer:hover {\n border-top-color: rgba(244, 111, 54, 0.10);\n }\n\n .status-badge {\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 12px;\n font-weight: 600;\n color: #1a2e2a;\n background: rgba(255, 255, 255, 0.7);\n backdrop-filter: blur(10px);\n padding: 6px 18px 6px 12px;\n border-radius: 30px;\n border: 1px solid rgba(2, 111, 61, 0.06);\n transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n z-index: 3;\n }\n\n .status-badge:active {\n transform: scale(0.95);\n transition: all 0.1s ease;\n }\n\n .status-badge::before {\n content: '';\n position: absolute;\n inset: -2px;\n border-radius: 30px;\n background: linear-gradient(135deg, rgba(244, 111, 54, 0.10), transparent, rgba(244, 111, 54, 0.10));\n z-index: -1;\n opacity: 0;\n transition: opacity 0.6s ease;\n filter: blur(12px);\n }\n\n .status-badge:hover {\n background: rgba(255, 248, 245, 0.9);\n border-color: #f46f36;\n transform: scale(1.04) translateY(-2px);\n box-shadow: 0 8px 40px rgba(244, 111, 54, 0.08);\n }\n\n .status-badge:hover::before {\n opacity: 1;\n }\n\n .status-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: #039855;\n display: inline-block;\n animation: pulse 2s ease-in-out infinite;\n transition: all 0.5s ease;\n box-shadow: 0 0 12px rgba(2, 111, 61, 0.15);\n }\n\n .status-badge:hover .status-dot {\n background: #f46f36;\n box-shadow: 0 0 30px rgba(244, 111, 54, 0.4);\n animation-duration: 1s;\n }\n\n @keyframes pulse {\n 0%, 100% { opacity: 1; transform: scale(1); }\n 50% { opacity: 0.4; transform: scale(0.8); }\n }\n\n .footer .info {\n font-size: 12px;\n font-weight: 500;\n color: #1a2e2a;\n transition: all 0.4s ease;\n }\n\n .footer .info i {\n color: #026F3D;\n margin-right: 6px;\n transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n .footer:hover .info i {\n color: #f46f36;\n transform: scale(1.15) rotate(-8deg);\n filter: drop-shadow(0 0 12px rgba(244, 111, 54, 0.1));\n }\n\n .footer .divider {\n color: #c5d9d1;\n font-size: 14px;\n transition: color 0.4s ease;\n }\n\n .footer:hover .divider {\n color: #f46f36;\n }\n\n \/* ============================================\n RESPONSIVE BREAKPOINTS\n ============================================ *\/\n\n @media (max-width: 820px) {\n .card {\n padding: 28px 28px 24px;\n border-radius: 20px;\n }\n\n .header-text h1 {\n font-size: 24px;\n }\n\n .header-icon {\n width: 46px;\n height: 46px;\n font-size: 20px;\n }\n\n .services-grid {\n gap: 14px;\n }\n\n .service-card {\n padding: 14px 16px;\n }\n\n .service-card .service-name {\n font-size: 13px;\n }\n\n .service-card .service-desc {\n font-size: 10px;\n padding-left: 38px;\n }\n\n .american-section {\n padding: 18px 20px;\n }\n\n .american-section .american-title {\n font-size: 15px;\n }\n\n .american-grid {\n gap: 8px;\n }\n\n .american-item {\n padding: 6px 10px;\n }\n\n .american-item span {\n font-size: 11px;\n }\n\n .public-notice {\n font-size: 12px;\n padding: 14px 18px;\n }\n\n .section-title {\n font-size: 17px;\n }\n }\n\n @media (max-width: 680px) {\n .card {\n padding: 22px 20px 18px;\n border-radius: 18px;\n }\n\n .header {\n gap: 14px;\n margin-bottom: 18px;\n flex-wrap: wrap;\n }\n\n .header-text h1 {\n font-size: 20px;\n }\n\n .header-icon {\n width: 40px;\n height: 40px;\n font-size: 18px;\n border-radius: 12px;\n }\n\n .header-text .sub {\n font-size: 9px;\n }\n\n .services-grid {\n grid-template-columns: 1fr 1fr;\n gap: 12px;\n }\n\n .service-card {\n padding: 12px 14px;\n }\n\n .service-card .service-icon {\n width: 28px;\n height: 28px;\n font-size: 12px;\n margin-right: 6px;\n }\n\n .service-card .service-name {\n font-size: 12px;\n }\n\n .service-card .service-desc {\n font-size: 9px;\n padding-left: 34px;\n }\n\n .section-title {\n font-size: 15px;\n margin: 16px 0 12px 0;\n gap: 8px;\n }\n\n .section-title i {\n font-size: 14px;\n padding: 5px;\n }\n\n .american-section {\n padding: 16px 18px;\n }\n\n .american-section .american-title {\n font-size: 14px;\n }\n\n .american-section .american-desc {\n font-size: 11px;\n }\n\n .american-grid {\n grid-template-columns: 1fr 1fr;\n gap: 6px;\n }\n\n .american-item {\n padding: 6px 8px;\n gap: 8px;\n }\n\n .american-item i {\n font-size: 10px;\n width: 16px;\n }\n\n .american-item span {\n font-size: 10px;\n }\n\n .public-notice {\n font-size: 11px;\n padding: 12px 16px;\n border-left-width: 4px;\n }\n\n .public-notice .notice-icon {\n width: 30px;\n height: 30px;\n font-size: 13px;\n margin-right: 8px;\n }\n\n .footer {\n gap: 12px;\n padding-top: 14px;\n }\n\n .status-badge {\n font-size: 10px;\n padding: 4px 14px 4px 10px;\n }\n\n .footer .info {\n font-size: 10px;\n }\n }\n\n @media (max-width: 500px) {\n body {\n padding: 12px;\n }\n\n .card {\n padding: 16px 14px 14px;\n border-radius: 14px;\n }\n\n .header {\n gap: 12px;\n margin-bottom: 14px;\n }\n\n .header-text h1 {\n font-size: 17px;\n }\n\n .header-icon {\n width: 34px;\n height: 34px;\n font-size: 15px;\n border-radius: 10px;\n }\n\n .header-text .sub {\n font-size: 8px;\n letter-spacing: 0.8px;\n }\n\n .particle {\n display: none;\n }\n\n .services-grid {\n grid-template-columns: 1fr;\n gap: 10px;\n margin-bottom: 18px;\n }\n\n .service-card {\n padding: 12px 14px;\n border-left-width: 3px;\n }\n\n .service-card .service-icon {\n width: 28px;\n height: 28px;\n font-size: 12px;\n margin-right: 6px;\n }\n\n .service-card .service-name {\n font-size: 12px;\n }\n\n .service-card .service-desc {\n font-size: 9px;\n padding-left: 34px;\n }\n\n .section-title {\n font-size: 14px;\n margin: 14px 0 10px 0;\n gap: 6px;\n }\n\n .section-title i {\n font-size: 12px;\n padding: 4px;\n }\n\n .section-title .title-line {\n display: none;\n }\n\n .american-section {\n padding: 14px 14px;\n border-left-width: 4px;\n margin-bottom: 18px;\n }\n\n .american-section .american-title {\n font-size: 13px;\n gap: 8px;\n }\n\n .american-section .american-title i {\n font-size: 15px;\n }\n\n .american-section .american-desc {\n font-size: 10px;\n }\n\n .american-grid {\n grid-template-columns: 1fr;\n gap: 5px;\n margin-top: 8px;\n }\n\n .american-item {\n padding: 5px 8px;\n gap: 8px;\n }\n\n .american-item i {\n font-size: 10px;\n width: 16px;\n }\n\n .american-item span {\n font-size: 10px;\n }\n\n .public-notice {\n font-size: 10px;\n padding: 10px 12px;\n border-left-width: 3px;\n margin-bottom: 16px;\n }\n\n .public-notice .notice-icon {\n width: 26px;\n height: 26px;\n font-size: 11px;\n margin-right: 6px;\n }\n\n .footer {\n gap: 10px;\n padding-top: 12px;\n }\n\n .status-badge {\n font-size: 9px;\n padding: 3px 12px 3px 8px;\n gap: 6px;\n }\n\n .status-dot {\n width: 6px;\n height: 6px;\n }\n\n .footer .info {\n font-size: 9px;\n }\n\n .footer .divider {\n display: none;\n }\n }\n\n @media (max-width: 380px) {\n body {\n padding: 8px;\n }\n\n .card {\n padding: 12px 10px 10px;\n border-radius: 12px;\n }\n\n .header {\n gap: 10px;\n margin-bottom: 12px;\n }\n\n .header-text h1 {\n font-size: 15px;\n }\n\n .header-icon {\n width: 30px;\n height: 30px;\n font-size: 13px;\n border-radius: 8px;\n }\n\n .header-text .sub {\n font-size: 7px;\n letter-spacing: 0.6px;\n }\n\n .services-grid {\n gap: 8px;\n margin-bottom: 14px;\n }\n\n .service-card {\n padding: 10px 12px;\n }\n\n .service-card .service-icon {\n width: 24px;\n height: 24px;\n font-size: 10px;\n }\n\n .service-card .service-name {\n font-size: 11px;\n }\n\n .service-card .service-desc {\n font-size: 8px;\n padding-left: 30px;\n }\n\n .section-title {\n font-size: 12px;\n margin: 12px 0 8px 0;\n }\n\n .section-title i {\n font-size: 10px;\n padding: 3px;\n }\n\n .american-section {\n padding: 10px 10px;\n border-left-width: 3px;\n margin-bottom: 14px;\n }\n\n .american-section .american-title {\n font-size: 12px;\n }\n\n .american-section .american-title i {\n font-size: 13px;\n }\n\n .american-section .american-desc {\n font-size: 9px;\n }\n\n .american-item {\n padding: 4px 6px;\n gap: 6px;\n }\n\n .american-item i {\n font-size: 9px;\n width: 14px;\n }\n\n .american-item span {\n font-size: 9px;\n }\n\n .public-notice {\n font-size: 9px;\n padding: 8px 10px;\n margin-bottom: 14px;\n }\n\n .public-notice .notice-icon {\n width: 22px;\n height: 22px;\n font-size: 9px;\n margin-right: 5px;\n }\n\n .footer {\n gap: 8px;\n padding-top: 10px;\n }\n\n .status-badge {\n font-size: 8px;\n padding: 2px 10px 2px 6px;\n gap: 4px;\n }\n\n .status-dot {\n width: 5px;\n height: 5px;\n }\n\n .footer .info {\n font-size: 8px;\n }\n }\n\n @media (min-width: 1200px) {\n .card {\n max-width: 960px;\n padding: 42px 48px 36px;\n }\n\n .services-grid {\n gap: 20px;\n }\n\n .service-card {\n padding: 20px 24px;\n }\n\n .service-card .service-name {\n font-size: 16px;\n }\n\n .service-card .service-desc {\n font-size: 12px;\n padding-left: 46px;\n }\n\n .service-card .service-icon {\n width: 36px;\n height: 36px;\n font-size: 16px;\n }\n\n .header-text h1 {\n font-size: 32px;\n }\n\n .header-icon {\n width: 56px;\n height: 56px;\n font-size: 26px;\n }\n\n .american-section {\n padding: 24px 28px;\n }\n\n .american-section .american-title {\n font-size: 18px;\n }\n\n .american-grid {\n gap: 12px;\n }\n\n .american-item span {\n font-size: 13px;\n }\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"particle\"><\/div>\n <div class=\"particle\"><\/div>\n <div class=\"particle\"><\/div>\n <div class=\"particle\"><\/div>\n <div class=\"particle\"><\/div>\n\n <div class=\"card\">\n <!-- Header -->\n <div class=\"header\">\n <div class=\"header-icon-wrapper\">\n <div class=\"header-icon\">\n <i class=\"fas fa-concierge-bell\"><\/i>\n <\/div>\n <\/div>\n <div class=\"header-text\">\n <h1>Library <span>Services<\/span><\/h1>\n <div class=\"sub\"><span class=\"accent\">\u2726<\/span> NIPA LIBRARY SERVICES <span class=\"accent\">\u2726<\/span><\/div>\n <\/div>\n <\/div>\n\n <!-- Services Grid -->\n <div class=\"services-grid\">\n <div class=\"service-card\">\n <div class=\"service-name\">\n <span class=\"service-icon\"><i class=\"fas fa-book-open\"><\/i><\/span>\n Online Resources\n <\/div>\n <div class=\"service-desc\">\n Journals: <a href=\"https:\/\/www.jstor.org\" target=\"_blank\">JSTOR<\/a>, <a href=\"https:\/\/www.emeraldinsight.com\" target=\"_blank\">Emerald Insight<\/a>, <a href=\"https:\/\/hstalks.com\" target=\"_blank\">HS Talks<\/a> & eBooks\n <\/div>\n <\/div>\n\n <div class=\"service-card\">\n <div class=\"service-name\">\n <span class=\"service-icon\"><i class=\"fas fa-desktop\"><\/i><\/span>\n Computer Access\n <\/div>\n <div class=\"service-desc\">\n Free computer usage with internet access for research and general browsing\n <\/div>\n <\/div>\n\n <div class=\"service-card\">\n <div class=\"service-name\">\n <span class=\"service-icon\"><i class=\"fas fa-search\"><\/i><\/span>\n Research Support\n <\/div>\n <div class=\"service-desc\">\n Professional assistance with research and information retrieval\n <\/div>\n <\/div>\n\n <div class=\"service-card\">\n <div class=\"service-name\">\n <span class=\"service-icon\"><i class=\"fas fa-copy\"><\/i><\/span>\n Reprographic Services\n <\/div>\n <div class=\"service-desc\">\n Photocopying, printing and scanning services available\n <\/div>\n <\/div>\n\n <div class=\"service-card\">\n <div class=\"service-name\">\n <span class=\"service-icon\"><i class=\"fas fa-question-circle\"><\/i><\/span>\n Reference Services\n <\/div>\n <div class=\"service-desc\">\n Expert guidance on using library resources and finding information\n <\/div>\n <\/div>\n\n <div class=\"service-card\">\n <div class=\"service-name\">\n <span class=\"service-icon\"><i class=\"fas fa-chalkboard-teacher\"><\/i><\/span>\n User Education\n <\/div>\n <div class=\"service-desc\">\n Training on information literacy and library resource usage\n <\/div>\n <\/div>\n\n <div class=\"service-card\">\n <div class=\"service-name\">\n <span class=\"service-icon\"><i class=\"fas fa-tasks\"><\/i><\/span>\n Assignment Desk\n <\/div>\n <div class=\"service-desc\">\n Support for assignment research and resource recommendations\n <\/div>\n <\/div>\n\n <div class=\"service-card\">\n <div class=\"service-name\">\n <span class=\"service-icon\"><i class=\"fas fa-handshake\"><\/i><\/span>\n External Membership\n <\/div>\n <div class=\"service-desc\">\n Individual & Corporate membership services available\n <\/div>\n <\/div>\n <\/div>\n\n <!-- American Corner Section - GREEN & ORANGE -->\n <div class=\"section-title\">\n <i class=\"fas fa-flag-usa\"><\/i>\n American Corner Services\n <span class=\"title-line\"><\/span>\n <\/div>\n\n <div class=\"american-section\">\n <div class=\"american-title\">\n <i class=\"fas fa-star\"><\/i>\n American Corner \u2014 A Partnership with the U.S. Embassy\n <\/div>\n <div class=\"american-desc\">\n The library through the <strong>American Corner<\/strong>, a partnership between the United States Embassy and the National Institute of Public Administration offers the following:\n <\/div>\n <div class=\"american-grid\">\n <div class=\"american-item\">\n <i class=\"fas fa-info-circle\"><\/i>\n <span>Unbiased information about the United States<\/span>\n <\/div>\n <div class=\"american-item\">\n <i class=\"fas fa-graduation-cap\"><\/i>\n <span>Information on higher education opportunities in the U.S.<\/span>\n <\/div>\n <div class=\"american-item\">\n <i class=\"fas fa-language\"><\/i>\n <span>English language learning and resources<\/span>\n <\/div>\n <div class=\"american-item\">\n <i class=\"fas fa-calendar-alt\"><\/i>\n <span>Educational and cultural programs<\/span>\n <\/div>\n <div class=\"american-item\">\n <i class=\"fas fa-users\"><\/i>\n <span>Interaction with alumni of U.S. universities & exchange programs<\/span>\n <\/div>\n <div class=\"american-item\">\n <i class=\"fas fa-chart-line\"><\/i>\n <span>Trainings, workshops & seminars on skills development<\/span>\n <\/div>\n <div class=\"american-item\">\n <i class=\"fas fa-laptop\"><\/i>\n <span>Digital tools and learning through making for youth<\/span>\n <\/div>\n <div class=\"american-item\">\n <i class=\"fas fa-film\"><\/i>\n <span>Film screenings<\/span>\n <\/div>\n <div class=\"american-item\" style=\"grid-column: 1 \/ -1;\">\n <i class=\"fas fa-comments\"><\/i>\n <span>Multi-purpose discussion room<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Public Notice -->\n <div class=\"public-notice\">\n <div style=\"display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;\">\n <span class=\"notice-icon\"><i class=\"fas fa-users\"><\/i><\/span>\n <span class=\"notice-text\">\n <strong>Members of the public<\/strong> may use library facilities for reference, borrowing or research purposes on terms and conditions determined by the Institute.\n <\/span>\n <\/div>\n <\/div>\n\n <!-- Footer -->\n <div class=\"footer\">\n <span class=\"status-badge\" id=\"statusBadge\">\n <span class=\"status-dot\"><\/span>\n All Services Available\n <\/span>\n <span class=\"divider\">\u2022<\/span>\n <span class=\"info\">\n <i class=\"far fa-clock\"><\/i> Mon\u2013Fri: 09:00\u201317:00\n <\/span>\n <\/div>\n <\/div>\n\n <script>\n \/\/ Ripple effect\n document.querySelectorAll('.service-card, .american-item, .public-notice').forEach(card => {\n card.addEventListener('click', function(e) {\n const rect = this.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n \n const ripple = document.createElement('span');\n ripple.className = 'ripple';\n ripple.style.left = x + 'px';\n ripple.style.top = y + 'px';\n ripple.style.width = '20px';\n ripple.style.height = '20px';\n \n this.appendChild(ripple);\n \n setTimeout(() => {\n ripple.remove();\n }, 800);\n });\n });\n\n \/\/ Status badge toggle\n document.getElementById('statusBadge').addEventListener('click', function() {\n const dot = this.querySelector('.status-dot');\n const text = this.childNodes[2];\n \n if (text.textContent.trim() === 'All Services Available') {\n text.textContent = ' Limited Services ';\n dot.style.background = '#f46f36';\n this.style.borderColor = '#f46f36';\n this.style.boxShadow = '0 8px 40px rgba(244, 111, 54, 0.15)';\n } else {\n text.textContent = ' All Services Available ';\n dot.style.background = '#039855';\n this.style.borderColor = 'rgba(2, 111, 61, 0.06)';\n this.style.boxShadow = 'none';\n }\n });\n <\/script>\n\n<\/body>\n<\/html>\t\t\t\t<\/div>\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>Library Services \u2726 NIPA Library Services \u2726 NIPA LIBRARY SERVICES \u2726 Online Resources Journals: JSTOR, Emerald Insight, HS Talks & eBooks Computer Access Free computer usage with internet access for research and general browsing Research Support Professional assistance with research and information retrieval Reprographic Services Photocopying, printing and scanning services available Reference Services Expert guidance […]<\/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-50557","page","type-page","status-publish","hentry"],"rttpg_featured_image_url":null,"rttpg_author":{"display_name":"tharrison","author_link":"https:\/\/www.nipa.ac.zm\/index.php\/author\/tharrison\/"},"rttpg_comment":0,"rttpg_category":null,"rttpg_excerpt":"Library Services \u2726 NIPA Library Services \u2726 NIPA LIBRARY SERVICES \u2726 Online Resources Journals: JSTOR, Emerald Insight, HS Talks & eBooks Computer Access Free computer usage with internet access for research and general browsing Research Support Professional assistance with research and information retrieval Reprographic Services Photocopying, printing and scanning services available Reference Services Expert guidance…","_links":{"self":[{"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/pages\/50557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/comments?post=50557"}],"version-history":[{"count":17,"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/pages\/50557\/revisions"}],"predecessor-version":[{"id":55758,"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/pages\/50557\/revisions\/55758"}],"wp:attachment":[{"href":"https:\/\/www.nipa.ac.zm\/index.php\/wp-json\/wp\/v2\/media?parent=50557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}