Our Portfolio - Gophine Services<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Isolated CSS - Only affects portfolio page *\/\r\n .portfolio-page * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n .portfolio-page {\r\n font-family: 'Poppins', sans-serif;\r\n line-height: 1.6;\r\n color: #333333;\r\n background-color: #fefefe;\r\n overflow-x: hidden;\r\n }\r\n \r\n .portfolio-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n \r\n \/* Image fallback styling *\/\r\n .portfolio-image {\r\n background: linear-gradient(135deg, #004d99, #4CAF50);\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 .portfolio-image.fallback::before {\r\n content: attr(data-fallback-text);\r\n text-align: center;\r\n padding: 20px;\r\n font-size: 1.2rem;\r\n }\r\n \r\n \/* Hero Section - Enhanced *\/\r\n .portfolio-hero {\r\n background: linear-gradient(135deg, rgba(0, 77, 153, 0.9) 0%, rgba(20, 100, 200, 0.85) 50%, rgba(76, 175, 80, 0.8) 100%), \r\n url('https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: fixed;\r\n color: white;\r\n text-align: center;\r\n padding: 140px 20px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .portfolio-hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 80%, rgba(76, 175, 80, 0.1) 0%, transparent 50%);\r\n }\r\n \r\n .portfolio-hero h1 {\r\n font-size: 4rem;\r\n margin-bottom: 20px;\r\n font-weight: 800;\r\n font-family: 'Montserrat', sans-serif;\r\n text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n letter-spacing: -0.5px;\r\n position: relative;\r\n animation: fadeInDown 1s ease-out;\r\n }\r\n \r\n .portfolio-hero p {\r\n font-size: 1.4rem;\r\n opacity: 0.95;\r\n max-width: 800px;\r\n margin: 0 auto 30px;\r\n font-weight: 300;\r\n position: relative;\r\n animation: fadeInUp 1s ease-out 0.3s both;\r\n }\r\n \r\n .hero-cta {\r\n display: inline-block;\r\n background: linear-gradient(90deg, #FF6B35, #FF8E53);\r\n color: white;\r\n padding: 16px 40px;\r\n border-radius: 50px;\r\n text-decoration: none;\r\n font-weight: 600;\r\n font-size: 1.1rem;\r\n margin-top: 10px;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);\r\n position: relative;\r\n overflow: hidden;\r\n z-index: 1;\r\n animation: fadeInUp 1s ease-out 0.6s both;\r\n }\r\n \r\n .hero-cta::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(90deg, #FF8E53, #FF6B35);\r\n z-index: -1;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n \r\n .hero-cta:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 25px rgba(255, 107, 53, 0.5);\r\n }\r\n \r\n .hero-cta:hover::before {\r\n opacity: 1;\r\n }\r\n \r\n \/* Section Styling *\/\r\n .portfolio-section {\r\n padding: 100px 0;\r\n }\r\n \r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n position: relative;\r\n }\r\n \r\n .section-header::after {\r\n content: '';\r\n position: absolute;\r\n width: 80px;\r\n height: 4px;\r\n background: linear-gradient(90deg, #004d99, #4CAF50);\r\n bottom: -15px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n border-radius: 2px;\r\n }\r\n \r\n .portfolio-title {\r\n font-size: 2.8rem;\r\n color: #111;\r\n margin-bottom: 15px;\r\n font-weight: 800;\r\n font-family: 'Montserrat', sans-serif;\r\n position: relative;\r\n }\r\n \r\n .portfolio-subtitle {\r\n text-align: center;\r\n color: #6c757d;\r\n max-width: 700px;\r\n margin: 0 auto 50px;\r\n font-size: 1.2rem;\r\n line-height: 1.7;\r\n }\r\n \r\n \/* Filter Buttons - Enhanced *\/\r\n .portfolio-filters {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n margin-bottom: 50px;\r\n }\r\n \r\n .filter-btn {\r\n background: white;\r\n border: 2px solid #eaeaea;\r\n color: #555;\r\n padding: 12px 28px;\r\n border-radius: 50px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n font-size: 0.95rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .filter-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, #004d99, #4CAF50);\r\n z-index: -1;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .filter-btn:hover {\r\n color: white;\r\n border-color: #004d99;\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 15px rgba(0, 77, 153, 0.2);\r\n }\r\n \r\n .filter-btn:hover::before {\r\n opacity: 1;\r\n }\r\n \r\n .filter-btn.active {\r\n background: linear-gradient(135deg, #004d99, #4CAF50);\r\n color: white;\r\n border-color: transparent;\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 15px rgba(0, 77, 153, 0.3);\r\n }\r\n \r\n \/* Portfolio Grid - Enhanced *\/\r\n .portfolio-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\r\n gap: 35px;\r\n margin-top: 40px;\r\n }\r\n \r\n .portfolio-item {\r\n background: white;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n position: relative;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n \r\n .portfolio-item.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \r\n .portfolio-item:hover {\r\n transform: translateY(-15px);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.15);\r\n }\r\n \r\n .portfolio-image {\r\n height: 260px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n \r\n .portfolio-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s ease;\r\n }\r\n \r\n .portfolio-item:hover .portfolio-image img {\r\n transform: scale(1.1);\r\n }\r\n \r\n .portfolio-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, rgba(0, 77, 153, 0.85), rgba(76, 175, 80, 0.85));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transition: all 0.4s ease;\r\n backdrop-filter: blur(5px);\r\n }\r\n \r\n .portfolio-item:hover .portfolio-overlay {\r\n opacity: 1;\r\n }\r\n \r\n .portfolio-actions {\r\n display: flex;\r\n gap: 15px;\r\n }\r\n \r\n .portfolio-action {\r\n width: 55px;\r\n height: 55px;\r\n background: white;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #004d99;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n transform: translateY(20px);\r\n opacity: 0;\r\n }\r\n \r\n .portfolio-item:hover .portfolio-action {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n \r\n .portfolio-action:nth-child(1) {\r\n transition-delay: 0.1s;\r\n }\r\n \r\n .portfolio-action:nth-child(2) {\r\n transition-delay: 0.2s;\r\n }\r\n \r\n .portfolio-action:hover {\r\n background: #FF6B35;\r\n color: white;\r\n transform: scale(1.1) !important;\r\n }\r\n \r\n .portfolio-content {\r\n padding: 30px;\r\n position: relative;\r\n }\r\n \r\n .portfolio-category {\r\n color: #FF6B35;\r\n font-weight: 700;\r\n font-size: 0.85rem;\r\n margin-bottom: 12px;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n display: inline-block;\r\n padding: 5px 12px;\r\n background: rgba(255, 107, 53, 0.1);\r\n border-radius: 20px;\r\n }\r\n \r\n .portfolio-item h3 {\r\n color: #111;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n font-size: 1.5rem;\r\n line-height: 1.4;\r\n }\r\n \r\n .portfolio-item p {\r\n color: #666;\r\n margin-bottom: 20px;\r\n line-height: 1.7;\r\n }\r\n \r\n .portfolio-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n margin-top: 15px;\r\n }\r\n \r\n .portfolio-tag {\r\n background: #f8f9fa;\r\n color: #6c757d;\r\n padding: 6px 14px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .portfolio-item:hover .portfolio-tag {\r\n background: #e9ecef;\r\n }\r\n \r\n \/* Statistics Section - Enhanced *\/\r\n .portfolio-stats {\r\n background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);\r\n padding: 100px 0;\r\n margin: 80px 0;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .portfolio-stats::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"none\"\/><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"%23004d99\" opacity=\"0.1\"\/><\/svg>');\r\n }\r\n \r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\r\n gap: 40px;\r\n margin-top: 40px;\r\n }\r\n \r\n .stat-item {\r\n text-align: center;\r\n padding: 40px 20px;\r\n background: white;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.05);\r\n transition: all 0.3s ease;\r\n position: relative;\r\n z-index: 1;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n \r\n .stat-item.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \r\n .stat-item:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 15px 30px rgba(0,0,0,0.1);\r\n }\r\n \r\n .stat-item::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 5px;\r\n background: linear-gradient(90deg, #004d99, #4CAF50);\r\n border-radius: 16px 16px 0 0;\r\n }\r\n \r\n .stat-icon {\r\n font-size: 2.5rem;\r\n color: #004d99;\r\n margin-bottom: 20px;\r\n opacity: 0.8;\r\n }\r\n \r\n .stat-number {\r\n font-size: 3.5rem;\r\n color: #004d99;\r\n font-weight: 800;\r\n margin-bottom: 10px;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .stat-label {\r\n color: #6c757d;\r\n font-weight: 600;\r\n font-size: 1.1rem;\r\n }\r\n \r\n \/* Testimonials - Enhanced *\/\r\n .portfolio-testimonials {\r\n background: linear-gradient(135deg, #004d99, #0066cc);\r\n color: white;\r\n padding: 100px 0;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .portfolio-testimonials::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);\r\n z-index: 0;\r\n }\r\n \r\n .testimonials-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n gap: 30px;\r\n margin-top: 50px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n \r\n .testimonial-card {\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n padding: 40px 35px;\r\n border-radius: 16px;\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n transition: all 0.4s ease;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n \r\n .testimonial-card.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \r\n .testimonial-card:hover {\r\n transform: translateY(-10px);\r\n background: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.25);\r\n }\r\n \r\n .testimonial-text {\r\n font-style: italic;\r\n margin-bottom: 25px;\r\n position: relative;\r\n line-height: 1.8;\r\n font-size: 1.1rem;\r\n }\r\n \r\n .testimonial-text::before {\r\n content: '\"';\r\n font-size: 4rem;\r\n color: rgba(255, 255, 255, 0.3);\r\n position: absolute;\r\n top: -20px;\r\n left: -10px;\r\n font-family: serif;\r\n line-height: 1;\r\n }\r\n \r\n .testimonial-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n }\r\n \r\n .author-avatar {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, #FF6B35, #FF8E53);\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 font-size: 1.5rem;\r\n flex-shrink: 0;\r\n }\r\n \r\n .author-info h4 {\r\n margin-bottom: 5px;\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n }\r\n \r\n .author-info p {\r\n opacity: 0.9;\r\n font-size: 0.95rem;\r\n }\r\n \r\n \/* CTA Section - Enhanced *\/\r\n .portfolio-cta {\r\n background: linear-gradient(135deg, #004d99 0%, #0066cc 50%, #4CAF50 100%);\r\n color: white;\r\n text-align: center;\r\n padding: 100px 20px;\r\n border-radius: 20px;\r\n margin: 80px 0;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px rgba(0, 77, 153, 0.2);\r\n }\r\n \r\n .portfolio-cta::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"2\" fill=\"%23ffffff\" opacity=\"0.1\"\/><\/svg>');\r\n z-index: 0;\r\n }\r\n \r\n .portfolio-cta::after {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);\r\n z-index: 0;\r\n }\r\n \r\n .portfolio-cta h2 {\r\n font-size: 3rem;\r\n margin-bottom: 20px;\r\n position: relative;\r\n z-index: 1;\r\n font-weight: 800;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .portfolio-cta p {\r\n font-size: 1.3rem;\r\n max-width: 700px;\r\n margin: 0 auto 40px;\r\n opacity: 0.95;\r\n position: relative;\r\n z-index: 1;\r\n line-height: 1.7;\r\n }\r\n \r\n .portfolio-cta-button {\r\n display: inline-block;\r\n background-color: #FF6B35;\r\n background: linear-gradient(90deg, #FF6B35, #FF8E53);\r\n color: white;\r\n padding: 18px 50px;\r\n border-radius: 50px;\r\n text-decoration: none;\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n margin-top: 20px;\r\n transition: all 0.4s ease;\r\n position: relative;\r\n z-index: 1;\r\n overflow: hidden;\r\n box-shadow: 0 10px 25px rgba(255, 107, 53, 0.4);\r\n }\r\n \r\n .portfolio-cta-button::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(90deg, #FF8E53, #FF6B35);\r\n z-index: -1;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n \r\n .portfolio-cta-button:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 30px rgba(255, 107, 53, 0.5);\r\n }\r\n \r\n .portfolio-cta-button:hover::before {\r\n opacity: 1;\r\n }\r\n \r\n \/* Animations *\/\r\n @keyframes fadeInDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n \/* Responsive Design *\/\r\n @media (max-width: 1100px) {\r\n .portfolio-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .portfolio-hero {\r\n padding: 100px 20px;\r\n }\r\n \r\n .portfolio-hero h1 {\r\n font-size: 2.8rem;\r\n }\r\n \r\n .portfolio-section {\r\n padding: 70px 0;\r\n }\r\n \r\n .portfolio-title {\r\n font-size: 2.2rem;\r\n }\r\n \r\n .portfolio-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .portfolio-filters {\r\n gap: 10px;\r\n }\r\n \r\n .filter-btn {\r\n padding: 10px 22px;\r\n font-size: 0.9rem;\r\n }\r\n \r\n .portfolio-cta h2 {\r\n font-size: 2.2rem;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .portfolio-hero h1 {\r\n font-size: 2.2rem;\r\n }\r\n \r\n .portfolio-hero p {\r\n font-size: 1.1rem;\r\n }\r\n \r\n .portfolio-title {\r\n font-size: 1.8rem;\r\n }\r\n \r\n .portfolio-content {\r\n padding: 25px;\r\n }\r\n \r\n .portfolio-cta {\r\n padding: 70px 20px;\r\n }\r\n \r\n .portfolio-cta h2 {\r\n font-size: 1.8rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"portfolio-page\">\r\n \r\n <section class=\"portfolio-hero\">\r\n <div class=\"portfolio-container\">\r\n <h1>Our Creative Portfolio<\/h1>\r\n <p>Showcasing exceptional work and successful collaborations with clients across Uganda and beyond. Each project tells a story of innovation, dedication, and excellence.<\/p>\r\n <a href=\"#portfolio\" class=\"hero-cta\">Explore Our Work<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"portfolio-container\">\r\n \r\n <section class=\"portfolio-section\" id=\"portfolio\">\r\n <div class=\"section-header\">\r\n <h2 class=\"portfolio-title\">Featured Projects<\/h2>\r\n <p class=\"portfolio-subtitle\">Discover our diverse portfolio of creative solutions, from web development to print design, each crafted with precision and passion.<\/p>\r\n <\/div>\r\n\r\n <div class=\"portfolio-filters\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">All Projects<\/button>\r\n <button class=\"filter-btn\" data-filter=\"web\">Web Development<\/button>\r\n <button class=\"filter-btn\" data-filter=\"design\">Graphic Design<\/button>\r\n <button class=\"filter-btn\" data-filter=\"print\">Printing Services<\/button>\r\n <button class=\"filter-btn\" data-filter=\"education\">Education<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-grid\">\r\n \r\n <div class=\"portfolio-item\" data-category=\"web\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"E-commerce Website\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'Gophine Online Store')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Web Development<\/div>\r\n <h3>Gophine Online Store<\/h3>\r\n <p>A fully responsive e-commerce platform with integrated payment systems, inventory management, and customer analytics dashboard.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">E-commerce<\/span>\r\n <span class=\"portfolio-tag\">Mobile-First<\/span>\r\n <span class=\"portfolio-tag\">Payment Gateway<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item\" data-category=\"web\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"School Website\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'School Portal')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Web Development<\/div>\r\n <h3>Okufura Secondary School Portal<\/h3>\r\n <p>Comprehensive educational management system featuring student portals, parent access, administrative dashboard, and real-time reporting.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">Education<\/span>\r\n <span class=\"portfolio-tag\">Management System<\/span>\r\n <span class=\"portfolio-tag\">Real-time<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item\" data-category=\"design\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1586717791821-3f44a563fa4c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"Brand Identity\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'Brand Design')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Graphic Design<\/div>\r\n <h3>Fresh Farms Brand Identity<\/h3>\r\n <p>Complete brand identity system including logo design, color palette, typography, business cards, and marketing collateral for an agricultural enterprise.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">Branding<\/span>\r\n <span class=\"portfolio-tag\">Logo Design<\/span>\r\n <span class=\"portfolio-tag\">Visual Identity<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item\" data-category=\"print\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1541140532154-b024d705b90a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"Business Printing\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'Corporate Stationery')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Printing<\/div>\r\n <h3>Corporate Stationery Package<\/h3>\r\n <p>Premium corporate identity package featuring embossed business cards, letterheads, envelopes, and presentation folders with foil stamping.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">Business Cards<\/span>\r\n <span class=\"portfolio-tag\">Stationery<\/span>\r\n <span class=\"portfolio-tag\">Premium Finish<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item\" data-category=\"print\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1545235617-9465d2a55698?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"Event Materials\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'Conference Materials')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Printing<\/div>\r\n <h3>National Conference Materials<\/h3>\r\n <p>Complete event printing package including large-format banners, brochures, name tags, programs, and promotional materials for a national conference.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">Large Format<\/span>\r\n <span class=\"portfolio-tag\">Event Materials<\/span>\r\n <span class=\"portfolio-tag\">Promotional<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item\" data-category=\"education\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"Educational Materials\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'Educational Materials')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Education<\/div>\r\n <h3>Primary School Curriculum<\/h3>\r\n <p>Development of interactive digital learning materials, teacher guides, and assessment tools aligned with the national primary school curriculum.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">Curriculum<\/span>\r\n <span class=\"portfolio-tag\">Learning Materials<\/span>\r\n <span class=\"portfolio-tag\">Digital Education<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"portfolio-stats\">\r\n <div class=\"portfolio-container\">\r\n <div class=\"section-header\">\r\n <h2 class=\"portfolio-title\">Our Impact by Numbers<\/h2>\r\n <p class=\"portfolio-subtitle\">Quantifying our dedication to excellence and the tangible results we've delivered for our clients<\/p>\r\n <\/div>\r\n \r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon\"><i class=\"fas fa-project-diagram\"><\/i><\/div>\r\n <div class=\"stat-number\" data-count=\"23\">0<\/div>\r\n <div class=\"stat-label\">Projects Completed<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon\"><i class=\"fas fa-smile\"><\/i><\/div>\r\n <div class=\"stat-number\" data-count=\"431\">0<\/div>\r\n <div class=\"stat-label\">Satisfied Clients<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon\"><i class=\"fas fa-calendar-alt\"><\/i><\/div>\r\n <div class=\"stat-number\" data-count=\"6\">0<\/div>\r\n <div class=\"stat-label\">Years of Excellence<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon\"><i class=\"fas fa-users\"><\/i><\/div>\r\n <div class=\"stat-number\" data-count=\"8\">0<\/div>\r\n <div class=\"stat-label\">Expert Team Members<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"portfolio-testimonials\">\r\n <div class=\"portfolio-container\">\r\n <div class=\"section-header\">\r\n <h2 class=\"portfolio-title\" style=\"color: white;\">Client Testimonials<\/h2>\r\n <p class=\"portfolio-subtitle\" style=\"color: rgba(255,255,255,0.9);\">Hear directly from the businesses and organizations we've had the privilege to work with<\/p>\r\n <\/div>\r\n \r\n <div class=\"testimonials-grid\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-text\">\r\n Gophine Services transformed our online presence with a stunning website that perfectly captures our brand essence. Their attention to detail and professional approach exceeded all expectations.\r\n <\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">SM<\/div>\r\n <div class=\"author-info\">\r\n <h4>Sarah Mukasa<\/h4>\r\n <p>Director, Kampala Fashion Store<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-text\">\r\n The printing quality and attention to detail were exceptional. Our conference materials were delivered ahead of schedule and received countless compliments from attendees and sponsors alike.\r\n <\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">DN<\/div>\r\n <div class=\"author-info\">\r\n <h4>David Nyakuni<\/h4>\r\n <p>Event Manager, Tech Conference Uganda<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-text\">\r\n Their educational consulting services helped our school streamline operations and significantly improve learning outcomes. A truly professional and knowledgeable team.\r\n <\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">AN<\/div>\r\n <div class=\"author-info\">\r\n <h4>Alice Nalwoga<\/h4>\r\n <p>Principal, St. Mary's School<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"portfolio-cta\">\r\n <h2>Ready to Bring Your Vision to Life?<\/h2>\r\n <p>Let's collaborate to create something extraordinary. Share your ideas with us, and we'll transform them into remarkable solutions that drive your success.<\/p>\r\n <a href=\"https:\/\/wa.me\/256774479180\" class=\"portfolio-cta-button\">Start Your Project Today<\/a>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Animation for portfolio items on scroll\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const observerOptions = {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -50px 0px'\r\n };\r\n \r\n const observer = new IntersectionObserver(function(entries) {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n }\r\n });\r\n }, observerOptions);\r\n \r\n \/\/ Observe elements for animation\r\n const animatedElements = document.querySelectorAll('.portfolio-item, .stat-item, .testimonial-card');\r\n animatedElements.forEach(element => {\r\n observer.observe(element);\r\n });\r\n \r\n \/\/ Add staggered animation delay\r\n const portfolioItems = document.querySelectorAll('.portfolio-item');\r\n portfolioItems.forEach((element, index) => {\r\n element.style.transitionDelay = `${index * 0.1}s`;\r\n });\r\n \r\n \/\/ Portfolio filtering\r\n const filterButtons = document.querySelectorAll('.filter-btn');\r\n const portfolioItemsAll = document.querySelectorAll('.portfolio-item');\r\n \r\n filterButtons.forEach(button => {\r\n button.addEventListener('click', function() {\r\n \/\/ Remove active class from all buttons\r\n filterButtons.forEach(btn => btn.classList.remove('active'));\r\n \/\/ Add active class to clicked button\r\n this.classList.add('active');\r\n \r\n const filterValue = this.getAttribute('data-filter');\r\n \r\n portfolioItemsAll.forEach((item, index) => {\r\n if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {\r\n item.style.display = 'block';\r\n \/\/ Reset and reapply animation delay\r\n setTimeout(() => {\r\n item.style.transitionDelay = `${index * 0.1}s`;\r\n }, 10);\r\n } else {\r\n item.style.display = 'none';\r\n }\r\n });\r\n });\r\n });\r\n \r\n \/\/ Animated counter for statistics\r\n const statNumbers = document.querySelectorAll('.stat-number');\r\n \r\n const animateCounter = (element) => {\r\n const target = parseInt(element.getAttribute('data-count'));\r\n const duration = 2000;\r\n const step = target \/ (duration \/ 16);\r\n let current = 0;\r\n \r\n const timer = setInterval(() => {\r\n current += step;\r\n if (current >= target) {\r\n element.textContent = target + (element.getAttribute('data-count') > '100' ? '+' : '');\r\n clearInterval(timer);\r\n } else {\r\n element.textContent = Math.floor(current);\r\n }\r\n }, 16);\r\n };\r\n \r\n const statsObserver = new IntersectionObserver(function(entries) {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n animateCounter(entry.target);\r\n statsObserver.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.5 });\r\n \r\n statNumbers.forEach(stat => {\r\n statsObserver.observe(stat);\r\n });\r\n \r\n \/\/ Add subtle floating animation to CTA button\r\n const ctaButton = document.querySelector('.portfolio-cta-button');\r\n if (ctaButton) {\r\n setInterval(() => {\r\n ctaButton.style.transform = 'translateY(-3px)';\r\n setTimeout(() => {\r\n ctaButton.style.transform = 'translateY(0)';\r\n }, 1500);\r\n }, 3000);\r\n }\r\n \r\n \/\/ Image fallback handling\r\n const portfolioImages = document.querySelectorAll('.portfolio-image');\r\n portfolioImages.forEach(image => {\r\n const img = image.querySelector('img');\r\n if (img) {\r\n \/\/ If image fails to load, show fallback\r\n img.addEventListener('error', function() {\r\n const altText = this.getAttribute('alt') || 'Project Image';\r\n this.parentElement.classList.add('fallback');\r\n this.parentElement.setAttribute('data-fallback-text', altText);\r\n this.style.display = 'none';\r\n });\r\n \r\n \/\/ Check if image is already broken\r\n if (img.complete && img.naturalHeight === 0) {\r\n const altText = img.getAttribute('alt') || 'Project Image';\r\n image.classList.add('fallback');\r\n image.setAttribute('data-fallback-text', altText);\r\n img.style.display = 'none';\r\n }\r\n }\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Portfolio – Gophine Services Our Creative Portfolio Showcasing exceptional work and successful collaborations with clients across Uganda and beyond. Each project tells a story of innovation, dedication, and excellence. Explore Our Work Featured Projects Discover our diverse portfolio of creative solutions, from web development to print design, each crafted with precision and passion. All […]<\/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-1349","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/comments?post=1349"}],"version-history":[{"count":31,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1349\/revisions"}],"predecessor-version":[{"id":1439,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1349\/revisions\/1439"}],"wp:attachment":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/media?parent=1349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t

\n\t\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n Our Portfolio - Gophine Services<\/title>\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800&family=Montserrat:wght@400;600;700;800&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* Isolated CSS - Only affects portfolio page *\/\r\n .portfolio-page * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n \r\n .portfolio-page {\r\n font-family: 'Poppins', sans-serif;\r\n line-height: 1.6;\r\n color: #333333;\r\n background-color: #fefefe;\r\n overflow-x: hidden;\r\n }\r\n \r\n .portfolio-container {\r\n max-width: 1400px;\r\n margin: 0 auto;\r\n padding: 0 20px;\r\n }\r\n \r\n \/* Image fallback styling *\/\r\n .portfolio-image {\r\n background: linear-gradient(135deg, #004d99, #4CAF50);\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 .portfolio-image.fallback::before {\r\n content: attr(data-fallback-text);\r\n text-align: center;\r\n padding: 20px;\r\n font-size: 1.2rem;\r\n }\r\n \r\n \/* Hero Section - Enhanced *\/\r\n .portfolio-hero {\r\n background: linear-gradient(135deg, rgba(0, 77, 153, 0.9) 0%, rgba(20, 100, 200, 0.85) 50%, rgba(76, 175, 80, 0.8) 100%), \r\n url('https:\/\/images.unsplash.com\/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1600&q=80');\r\n background-size: cover;\r\n background-position: center;\r\n background-attachment: fixed;\r\n color: white;\r\n text-align: center;\r\n padding: 140px 20px;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .portfolio-hero::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),\r\n radial-gradient(circle at 80% 80%, rgba(76, 175, 80, 0.1) 0%, transparent 50%);\r\n }\r\n \r\n .portfolio-hero h1 {\r\n font-size: 4rem;\r\n margin-bottom: 20px;\r\n font-weight: 800;\r\n font-family: 'Montserrat', sans-serif;\r\n text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n letter-spacing: -0.5px;\r\n position: relative;\r\n animation: fadeInDown 1s ease-out;\r\n }\r\n \r\n .portfolio-hero p {\r\n font-size: 1.4rem;\r\n opacity: 0.95;\r\n max-width: 800px;\r\n margin: 0 auto 30px;\r\n font-weight: 300;\r\n position: relative;\r\n animation: fadeInUp 1s ease-out 0.3s both;\r\n }\r\n \r\n .hero-cta {\r\n display: inline-block;\r\n background: linear-gradient(90deg, #FF6B35, #FF8E53);\r\n color: white;\r\n padding: 16px 40px;\r\n border-radius: 50px;\r\n text-decoration: none;\r\n font-weight: 600;\r\n font-size: 1.1rem;\r\n margin-top: 10px;\r\n transition: all 0.4s ease;\r\n box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);\r\n position: relative;\r\n overflow: hidden;\r\n z-index: 1;\r\n animation: fadeInUp 1s ease-out 0.6s both;\r\n }\r\n \r\n .hero-cta::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(90deg, #FF8E53, #FF6B35);\r\n z-index: -1;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n \r\n .hero-cta:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 25px rgba(255, 107, 53, 0.5);\r\n }\r\n \r\n .hero-cta:hover::before {\r\n opacity: 1;\r\n }\r\n \r\n \/* Section Styling *\/\r\n .portfolio-section {\r\n padding: 100px 0;\r\n }\r\n \r\n .section-header {\r\n text-align: center;\r\n margin-bottom: 60px;\r\n position: relative;\r\n }\r\n \r\n .section-header::after {\r\n content: '';\r\n position: absolute;\r\n width: 80px;\r\n height: 4px;\r\n background: linear-gradient(90deg, #004d99, #4CAF50);\r\n bottom: -15px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n border-radius: 2px;\r\n }\r\n \r\n .portfolio-title {\r\n font-size: 2.8rem;\r\n color: #111;\r\n margin-bottom: 15px;\r\n font-weight: 800;\r\n font-family: 'Montserrat', sans-serif;\r\n position: relative;\r\n }\r\n \r\n .portfolio-subtitle {\r\n text-align: center;\r\n color: #6c757d;\r\n max-width: 700px;\r\n margin: 0 auto 50px;\r\n font-size: 1.2rem;\r\n line-height: 1.7;\r\n }\r\n \r\n \/* Filter Buttons - Enhanced *\/\r\n .portfolio-filters {\r\n display: flex;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n gap: 12px;\r\n margin-bottom: 50px;\r\n }\r\n \r\n .filter-btn {\r\n background: white;\r\n border: 2px solid #eaeaea;\r\n color: #555;\r\n padding: 12px 28px;\r\n border-radius: 50px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n font-size: 0.95rem;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .filter-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, #004d99, #4CAF50);\r\n z-index: -1;\r\n opacity: 0;\r\n transition: opacity 0.3s ease;\r\n }\r\n \r\n .filter-btn:hover {\r\n color: white;\r\n border-color: #004d99;\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 15px rgba(0, 77, 153, 0.2);\r\n }\r\n \r\n .filter-btn:hover::before {\r\n opacity: 1;\r\n }\r\n \r\n .filter-btn.active {\r\n background: linear-gradient(135deg, #004d99, #4CAF50);\r\n color: white;\r\n border-color: transparent;\r\n transform: translateY(-3px);\r\n box-shadow: 0 8px 15px rgba(0, 77, 153, 0.3);\r\n }\r\n \r\n \/* Portfolio Grid - Enhanced *\/\r\n .portfolio-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));\r\n gap: 35px;\r\n margin-top: 40px;\r\n }\r\n \r\n .portfolio-item {\r\n background: white;\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\r\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n position: relative;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n \r\n .portfolio-item.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \r\n .portfolio-item:hover {\r\n transform: translateY(-15px);\r\n box-shadow: 0 20px 40px rgba(0,0,0,0.15);\r\n }\r\n \r\n .portfolio-image {\r\n height: 260px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n \r\n .portfolio-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.6s ease;\r\n }\r\n \r\n .portfolio-item:hover .portfolio-image img {\r\n transform: scale(1.1);\r\n }\r\n \r\n .portfolio-overlay {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(135deg, rgba(0, 77, 153, 0.85), rgba(76, 175, 80, 0.85));\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n opacity: 0;\r\n transition: all 0.4s ease;\r\n backdrop-filter: blur(5px);\r\n }\r\n \r\n .portfolio-item:hover .portfolio-overlay {\r\n opacity: 1;\r\n }\r\n \r\n .portfolio-actions {\r\n display: flex;\r\n gap: 15px;\r\n }\r\n \r\n .portfolio-action {\r\n width: 55px;\r\n height: 55px;\r\n background: white;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: #004d99;\r\n text-decoration: none;\r\n transition: all 0.3s ease;\r\n transform: translateY(20px);\r\n opacity: 0;\r\n }\r\n \r\n .portfolio-item:hover .portfolio-action {\r\n transform: translateY(0);\r\n opacity: 1;\r\n }\r\n \r\n .portfolio-action:nth-child(1) {\r\n transition-delay: 0.1s;\r\n }\r\n \r\n .portfolio-action:nth-child(2) {\r\n transition-delay: 0.2s;\r\n }\r\n \r\n .portfolio-action:hover {\r\n background: #FF6B35;\r\n color: white;\r\n transform: scale(1.1) !important;\r\n }\r\n \r\n .portfolio-content {\r\n padding: 30px;\r\n position: relative;\r\n }\r\n \r\n .portfolio-category {\r\n color: #FF6B35;\r\n font-weight: 700;\r\n font-size: 0.85rem;\r\n margin-bottom: 12px;\r\n text-transform: uppercase;\r\n letter-spacing: 1.5px;\r\n display: inline-block;\r\n padding: 5px 12px;\r\n background: rgba(255, 107, 53, 0.1);\r\n border-radius: 20px;\r\n }\r\n \r\n .portfolio-item h3 {\r\n color: #111;\r\n margin-bottom: 15px;\r\n font-weight: 700;\r\n font-size: 1.5rem;\r\n line-height: 1.4;\r\n }\r\n \r\n .portfolio-item p {\r\n color: #666;\r\n margin-bottom: 20px;\r\n line-height: 1.7;\r\n }\r\n \r\n .portfolio-tags {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 8px;\r\n margin-top: 15px;\r\n }\r\n \r\n .portfolio-tag {\r\n background: #f8f9fa;\r\n color: #6c757d;\r\n padding: 6px 14px;\r\n border-radius: 20px;\r\n font-size: 0.8rem;\r\n font-weight: 500;\r\n transition: all 0.3s ease;\r\n }\r\n \r\n .portfolio-item:hover .portfolio-tag {\r\n background: #e9ecef;\r\n }\r\n \r\n \/* Statistics Section - Enhanced *\/\r\n .portfolio-stats {\r\n background: linear-gradient(135deg, #f8f9fa 0%, #f1f3f5 100%);\r\n padding: 100px 0;\r\n margin: 80px 0;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .portfolio-stats::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><rect width=\"100\" height=\"100\" fill=\"none\"\/><circle cx=\"50\" cy=\"50\" r=\"1\" fill=\"%23004d99\" opacity=\"0.1\"\/><\/svg>');\r\n }\r\n \r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\r\n gap: 40px;\r\n margin-top: 40px;\r\n }\r\n \r\n .stat-item {\r\n text-align: center;\r\n padding: 40px 20px;\r\n background: white;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.05);\r\n transition: all 0.3s ease;\r\n position: relative;\r\n z-index: 1;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n \r\n .stat-item.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \r\n .stat-item:hover {\r\n transform: translateY(-10px);\r\n box-shadow: 0 15px 30px rgba(0,0,0,0.1);\r\n }\r\n \r\n .stat-item::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n height: 5px;\r\n background: linear-gradient(90deg, #004d99, #4CAF50);\r\n border-radius: 16px 16px 0 0;\r\n }\r\n \r\n .stat-icon {\r\n font-size: 2.5rem;\r\n color: #004d99;\r\n margin-bottom: 20px;\r\n opacity: 0.8;\r\n }\r\n \r\n .stat-number {\r\n font-size: 3.5rem;\r\n color: #004d99;\r\n font-weight: 800;\r\n margin-bottom: 10px;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .stat-label {\r\n color: #6c757d;\r\n font-weight: 600;\r\n font-size: 1.1rem;\r\n }\r\n \r\n \/* Testimonials - Enhanced *\/\r\n .portfolio-testimonials {\r\n background: linear-gradient(135deg, #004d99, #0066cc);\r\n color: white;\r\n padding: 100px 0;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .portfolio-testimonials::before {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);\r\n z-index: 0;\r\n }\r\n \r\n .testimonials-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\r\n gap: 30px;\r\n margin-top: 50px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n \r\n .testimonial-card {\r\n background: rgba(255, 255, 255, 0.1);\r\n backdrop-filter: blur(10px);\r\n padding: 40px 35px;\r\n border-radius: 16px;\r\n border: 1px solid rgba(255, 255, 255, 0.15);\r\n transition: all 0.4s ease;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n }\r\n \r\n .testimonial-card.visible {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n \r\n .testimonial-card:hover {\r\n transform: translateY(-10px);\r\n background: rgba(255, 255, 255, 0.15);\r\n border-color: rgba(255, 255, 255, 0.25);\r\n }\r\n \r\n .testimonial-text {\r\n font-style: italic;\r\n margin-bottom: 25px;\r\n position: relative;\r\n line-height: 1.8;\r\n font-size: 1.1rem;\r\n }\r\n \r\n .testimonial-text::before {\r\n content: '\"';\r\n font-size: 4rem;\r\n color: rgba(255, 255, 255, 0.3);\r\n position: absolute;\r\n top: -20px;\r\n left: -10px;\r\n font-family: serif;\r\n line-height: 1;\r\n }\r\n \r\n .testimonial-author {\r\n display: flex;\r\n align-items: center;\r\n gap: 20px;\r\n }\r\n \r\n .author-avatar {\r\n width: 60px;\r\n height: 60px;\r\n border-radius: 50%;\r\n background: linear-gradient(135deg, #FF6B35, #FF8E53);\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 font-size: 1.5rem;\r\n flex-shrink: 0;\r\n }\r\n \r\n .author-info h4 {\r\n margin-bottom: 5px;\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n }\r\n \r\n .author-info p {\r\n opacity: 0.9;\r\n font-size: 0.95rem;\r\n }\r\n \r\n \/* CTA Section - Enhanced *\/\r\n .portfolio-cta {\r\n background: linear-gradient(135deg, #004d99 0%, #0066cc 50%, #4CAF50 100%);\r\n color: white;\r\n text-align: center;\r\n padding: 100px 20px;\r\n border-radius: 20px;\r\n margin: 80px 0;\r\n position: relative;\r\n overflow: hidden;\r\n box-shadow: 0 20px 40px rgba(0, 77, 153, 0.2);\r\n }\r\n \r\n .portfolio-cta::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: url('data:image\/svg+xml,<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"120\" height=\"120\" viewBox=\"0 0 120 120\"><circle cx=\"60\" cy=\"60\" r=\"2\" fill=\"%23ffffff\" opacity=\"0.1\"\/><\/svg>');\r\n z-index: 0;\r\n }\r\n \r\n .portfolio-cta::after {\r\n content: '';\r\n position: absolute;\r\n top: -50%;\r\n left: -50%;\r\n width: 200%;\r\n height: 200%;\r\n background: radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);\r\n z-index: 0;\r\n }\r\n \r\n .portfolio-cta h2 {\r\n font-size: 3rem;\r\n margin-bottom: 20px;\r\n position: relative;\r\n z-index: 1;\r\n font-weight: 800;\r\n font-family: 'Montserrat', sans-serif;\r\n }\r\n \r\n .portfolio-cta p {\r\n font-size: 1.3rem;\r\n max-width: 700px;\r\n margin: 0 auto 40px;\r\n opacity: 0.95;\r\n position: relative;\r\n z-index: 1;\r\n line-height: 1.7;\r\n }\r\n \r\n .portfolio-cta-button {\r\n display: inline-block;\r\n background-color: #FF6B35;\r\n background: linear-gradient(90deg, #FF6B35, #FF8E53);\r\n color: white;\r\n padding: 18px 50px;\r\n border-radius: 50px;\r\n text-decoration: none;\r\n font-weight: 700;\r\n font-size: 1.2rem;\r\n margin-top: 20px;\r\n transition: all 0.4s ease;\r\n position: relative;\r\n z-index: 1;\r\n overflow: hidden;\r\n box-shadow: 0 10px 25px rgba(255, 107, 53, 0.4);\r\n }\r\n \r\n .portfolio-cta-button::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n background: linear-gradient(90deg, #FF8E53, #FF6B35);\r\n z-index: -1;\r\n opacity: 0;\r\n transition: opacity 0.4s ease;\r\n }\r\n \r\n .portfolio-cta-button:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 15px 30px rgba(255, 107, 53, 0.5);\r\n }\r\n \r\n .portfolio-cta-button:hover::before {\r\n opacity: 1;\r\n }\r\n \r\n \/* Animations *\/\r\n @keyframes fadeInDown {\r\n from {\r\n opacity: 0;\r\n transform: translateY(-30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n @keyframes fadeInUp {\r\n from {\r\n opacity: 0;\r\n transform: translateY(30px);\r\n }\r\n to {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n }\r\n \r\n \/* Responsive Design *\/\r\n @media (max-width: 1100px) {\r\n .portfolio-grid {\r\n grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .portfolio-hero {\r\n padding: 100px 20px;\r\n }\r\n \r\n .portfolio-hero h1 {\r\n font-size: 2.8rem;\r\n }\r\n \r\n .portfolio-section {\r\n padding: 70px 0;\r\n }\r\n \r\n .portfolio-title {\r\n font-size: 2.2rem;\r\n }\r\n \r\n .portfolio-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n \r\n .portfolio-filters {\r\n gap: 10px;\r\n }\r\n \r\n .filter-btn {\r\n padding: 10px 22px;\r\n font-size: 0.9rem;\r\n }\r\n \r\n .portfolio-cta h2 {\r\n font-size: 2.2rem;\r\n }\r\n }\r\n \r\n @media (max-width: 480px) {\r\n .portfolio-hero h1 {\r\n font-size: 2.2rem;\r\n }\r\n \r\n .portfolio-hero p {\r\n font-size: 1.1rem;\r\n }\r\n \r\n .portfolio-title {\r\n font-size: 1.8rem;\r\n }\r\n \r\n .portfolio-content {\r\n padding: 25px;\r\n }\r\n \r\n .portfolio-cta {\r\n padding: 70px 20px;\r\n }\r\n \r\n .portfolio-cta h2 {\r\n font-size: 1.8rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"portfolio-page\">\r\n \r\n <section class=\"portfolio-hero\">\r\n <div class=\"portfolio-container\">\r\n <h1>Our Creative Portfolio<\/h1>\r\n <p>Showcasing exceptional work and successful collaborations with clients across Uganda and beyond. Each project tells a story of innovation, dedication, and excellence.<\/p>\r\n <a href=\"#portfolio\" class=\"hero-cta\">Explore Our Work<\/a>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"portfolio-container\">\r\n \r\n <section class=\"portfolio-section\" id=\"portfolio\">\r\n <div class=\"section-header\">\r\n <h2 class=\"portfolio-title\">Featured Projects<\/h2>\r\n <p class=\"portfolio-subtitle\">Discover our diverse portfolio of creative solutions, from web development to print design, each crafted with precision and passion.<\/p>\r\n <\/div>\r\n\r\n <div class=\"portfolio-filters\">\r\n <button class=\"filter-btn active\" data-filter=\"all\">All Projects<\/button>\r\n <button class=\"filter-btn\" data-filter=\"web\">Web Development<\/button>\r\n <button class=\"filter-btn\" data-filter=\"design\">Graphic Design<\/button>\r\n <button class=\"filter-btn\" data-filter=\"print\">Printing Services<\/button>\r\n <button class=\"filter-btn\" data-filter=\"education\">Education<\/button>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-grid\">\r\n \r\n <div class=\"portfolio-item\" data-category=\"web\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"E-commerce Website\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'Gophine Online Store')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Web Development<\/div>\r\n <h3>Gophine Online Store<\/h3>\r\n <p>A fully responsive e-commerce platform with integrated payment systems, inventory management, and customer analytics dashboard.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">E-commerce<\/span>\r\n <span class=\"portfolio-tag\">Mobile-First<\/span>\r\n <span class=\"portfolio-tag\">Payment Gateway<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item\" data-category=\"web\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1523050854058-8df90110c9f1?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"School Website\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'School Portal')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Web Development<\/div>\r\n <h3>Okufura Secondary School Portal<\/h3>\r\n <p>Comprehensive educational management system featuring student portals, parent access, administrative dashboard, and real-time reporting.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">Education<\/span>\r\n <span class=\"portfolio-tag\">Management System<\/span>\r\n <span class=\"portfolio-tag\">Real-time<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item\" data-category=\"design\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1586717791821-3f44a563fa4c?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"Brand Identity\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'Brand Design')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Graphic Design<\/div>\r\n <h3>Fresh Farms Brand Identity<\/h3>\r\n <p>Complete brand identity system including logo design, color palette, typography, business cards, and marketing collateral for an agricultural enterprise.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">Branding<\/span>\r\n <span class=\"portfolio-tag\">Logo Design<\/span>\r\n <span class=\"portfolio-tag\">Visual Identity<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item\" data-category=\"print\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1541140532154-b024d705b90a?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"Business Printing\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'Corporate Stationery')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Printing<\/div>\r\n <h3>Corporate Stationery Package<\/h3>\r\n <p>Premium corporate identity package featuring embossed business cards, letterheads, envelopes, and presentation folders with foil stamping.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">Business Cards<\/span>\r\n <span class=\"portfolio-tag\">Stationery<\/span>\r\n <span class=\"portfolio-tag\">Premium Finish<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"portfolio-item\" data-category=\"print\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1545235617-9465d2a55698?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"Event Materials\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'Conference Materials')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Printing<\/div>\r\n <h3>National Conference Materials<\/h3>\r\n <p>Complete event printing package including large-format banners, brochures, name tags, programs, and promotional materials for a national conference.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">Large Format<\/span>\r\n <span class=\"portfolio-tag\">Event Materials<\/span>\r\n <span class=\"portfolio-tag\">Promotional<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"portfolio-item\" data-category=\"education\">\r\n <div class=\"portfolio-image\">\r\n <img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1503676260728-1c00da094a0b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80\" alt=\"Educational Materials\" loading=\"lazy\" onerror=\"this.onerror=null; this.parentElement.classList.add('fallback'); this.parentElement.setAttribute('data-fallback-text', 'Educational Materials')\">\r\n <div class=\"portfolio-overlay\">\r\n <div class=\"portfolio-actions\">\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-external-link-alt\"><\/i>\r\n <\/a>\r\n <a href=\"#\" class=\"portfolio-action\">\r\n <i class=\"fas fa-search\"><\/i>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"portfolio-content\">\r\n <div class=\"portfolio-category\">Education<\/div>\r\n <h3>Primary School Curriculum<\/h3>\r\n <p>Development of interactive digital learning materials, teacher guides, and assessment tools aligned with the national primary school curriculum.<\/p>\r\n <div class=\"portfolio-tags\">\r\n <span class=\"portfolio-tag\">Curriculum<\/span>\r\n <span class=\"portfolio-tag\">Learning Materials<\/span>\r\n <span class=\"portfolio-tag\">Digital Education<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"portfolio-stats\">\r\n <div class=\"portfolio-container\">\r\n <div class=\"section-header\">\r\n <h2 class=\"portfolio-title\">Our Impact by Numbers<\/h2>\r\n <p class=\"portfolio-subtitle\">Quantifying our dedication to excellence and the tangible results we've delivered for our clients<\/p>\r\n <\/div>\r\n \r\n <div class=\"stats-grid\">\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon\"><i class=\"fas fa-project-diagram\"><\/i><\/div>\r\n <div class=\"stat-number\" data-count=\"23\">0<\/div>\r\n <div class=\"stat-label\">Projects Completed<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon\"><i class=\"fas fa-smile\"><\/i><\/div>\r\n <div class=\"stat-number\" data-count=\"431\">0<\/div>\r\n <div class=\"stat-label\">Satisfied Clients<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon\"><i class=\"fas fa-calendar-alt\"><\/i><\/div>\r\n <div class=\"stat-number\" data-count=\"6\">0<\/div>\r\n <div class=\"stat-label\">Years of Excellence<\/div>\r\n <\/div>\r\n <div class=\"stat-item\">\r\n <div class=\"stat-icon\"><i class=\"fas fa-users\"><\/i><\/div>\r\n <div class=\"stat-number\" data-count=\"8\">0<\/div>\r\n <div class=\"stat-label\">Expert Team Members<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"portfolio-testimonials\">\r\n <div class=\"portfolio-container\">\r\n <div class=\"section-header\">\r\n <h2 class=\"portfolio-title\" style=\"color: white;\">Client Testimonials<\/h2>\r\n <p class=\"portfolio-subtitle\" style=\"color: rgba(255,255,255,0.9);\">Hear directly from the businesses and organizations we've had the privilege to work with<\/p>\r\n <\/div>\r\n \r\n <div class=\"testimonials-grid\">\r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-text\">\r\n Gophine Services transformed our online presence with a stunning website that perfectly captures our brand essence. Their attention to detail and professional approach exceeded all expectations.\r\n <\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">SM<\/div>\r\n <div class=\"author-info\">\r\n <h4>Sarah Mukasa<\/h4>\r\n <p>Director, Kampala Fashion Store<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-text\">\r\n The printing quality and attention to detail were exceptional. Our conference materials were delivered ahead of schedule and received countless compliments from attendees and sponsors alike.\r\n <\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">DN<\/div>\r\n <div class=\"author-info\">\r\n <h4>David Nyakuni<\/h4>\r\n <p>Event Manager, Tech Conference Uganda<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"testimonial-card\">\r\n <div class=\"testimonial-text\">\r\n Their educational consulting services helped our school streamline operations and significantly improve learning outcomes. A truly professional and knowledgeable team.\r\n <\/div>\r\n <div class=\"testimonial-author\">\r\n <div class=\"author-avatar\">AN<\/div>\r\n <div class=\"author-info\">\r\n <h4>Alice Nalwoga<\/h4>\r\n <p>Principal, St. Mary's School<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n \r\n <section class=\"portfolio-cta\">\r\n <h2>Ready to Bring Your Vision to Life?<\/h2>\r\n <p>Let's collaborate to create something extraordinary. Share your ideas with us, and we'll transform them into remarkable solutions that drive your success.<\/p>\r\n <a href=\"https:\/\/wa.me\/256774479180\" class=\"portfolio-cta-button\">Start Your Project Today<\/a>\r\n <\/section>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Animation for portfolio items on scroll\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const observerOptions = {\r\n threshold: 0.1,\r\n rootMargin: '0px 0px -50px 0px'\r\n };\r\n \r\n const observer = new IntersectionObserver(function(entries) {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n }\r\n });\r\n }, observerOptions);\r\n \r\n \/\/ Observe elements for animation\r\n const animatedElements = document.querySelectorAll('.portfolio-item, .stat-item, .testimonial-card');\r\n animatedElements.forEach(element => {\r\n observer.observe(element);\r\n });\r\n \r\n \/\/ Add staggered animation delay\r\n const portfolioItems = document.querySelectorAll('.portfolio-item');\r\n portfolioItems.forEach((element, index) => {\r\n element.style.transitionDelay = `${index * 0.1}s`;\r\n });\r\n \r\n \/\/ Portfolio filtering\r\n const filterButtons = document.querySelectorAll('.filter-btn');\r\n const portfolioItemsAll = document.querySelectorAll('.portfolio-item');\r\n \r\n filterButtons.forEach(button => {\r\n button.addEventListener('click', function() {\r\n \/\/ Remove active class from all buttons\r\n filterButtons.forEach(btn => btn.classList.remove('active'));\r\n \/\/ Add active class to clicked button\r\n this.classList.add('active');\r\n \r\n const filterValue = this.getAttribute('data-filter');\r\n \r\n portfolioItemsAll.forEach((item, index) => {\r\n if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {\r\n item.style.display = 'block';\r\n \/\/ Reset and reapply animation delay\r\n setTimeout(() => {\r\n item.style.transitionDelay = `${index * 0.1}s`;\r\n }, 10);\r\n } else {\r\n item.style.display = 'none';\r\n }\r\n });\r\n });\r\n });\r\n \r\n \/\/ Animated counter for statistics\r\n const statNumbers = document.querySelectorAll('.stat-number');\r\n \r\n const animateCounter = (element) => {\r\n const target = parseInt(element.getAttribute('data-count'));\r\n const duration = 2000;\r\n const step = target \/ (duration \/ 16);\r\n let current = 0;\r\n \r\n const timer = setInterval(() => {\r\n current += step;\r\n if (current >= target) {\r\n element.textContent = target + (element.getAttribute('data-count') > '100' ? '+' : '');\r\n clearInterval(timer);\r\n } else {\r\n element.textContent = Math.floor(current);\r\n }\r\n }, 16);\r\n };\r\n \r\n const statsObserver = new IntersectionObserver(function(entries) {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n animateCounter(entry.target);\r\n statsObserver.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.5 });\r\n \r\n statNumbers.forEach(stat => {\r\n statsObserver.observe(stat);\r\n });\r\n \r\n \/\/ Add subtle floating animation to CTA button\r\n const ctaButton = document.querySelector('.portfolio-cta-button');\r\n if (ctaButton) {\r\n setInterval(() => {\r\n ctaButton.style.transform = 'translateY(-3px)';\r\n setTimeout(() => {\r\n ctaButton.style.transform = 'translateY(0)';\r\n }, 1500);\r\n }, 3000);\r\n }\r\n \r\n \/\/ Image fallback handling\r\n const portfolioImages = document.querySelectorAll('.portfolio-image');\r\n portfolioImages.forEach(image => {\r\n const img = image.querySelector('img');\r\n if (img) {\r\n \/\/ If image fails to load, show fallback\r\n img.addEventListener('error', function() {\r\n const altText = this.getAttribute('alt') || 'Project Image';\r\n this.parentElement.classList.add('fallback');\r\n this.parentElement.setAttribute('data-fallback-text', altText);\r\n this.style.display = 'none';\r\n });\r\n \r\n \/\/ Check if image is already broken\r\n if (img.complete && img.naturalHeight === 0) {\r\n const altText = img.getAttribute('alt') || 'Project Image';\r\n image.classList.add('fallback');\r\n image.setAttribute('data-fallback-text', altText);\r\n img.style.display = 'none';\r\n }\r\n }\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Portfolio – Gophine Services Our Creative Portfolio Showcasing exceptional work and successful collaborations with clients across Uganda and beyond. Each project tells a story of innovation, dedication, and excellence. Explore Our Work Featured Projects Discover our diverse portfolio of creative solutions, from web development to print design, each crafted with precision and passion. All […]<\/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-1349","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1349","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/comments?post=1349"}],"version-history":[{"count":31,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1349\/revisions"}],"predecessor-version":[{"id":1439,"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/pages\/1349\/revisions\/1439"}],"wp:attachment":[{"href":"https:\/\/gophineservices.co.ug\/index.php\/wp-json\/wp\/v2\/media?parent=1349"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}