Our Projects - Al Jisr Association<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.0.0\/css\/all.min.css\">\r\n <style>\r\n :root {\r\n --primary: #093a65;\r\n --primary-light: #3a78d6;\r\n --secondary: #e30613;\r\n --accent: #437d43;\r\n --accent-light: #6da46d;\r\n --dark: #1e293b;\r\n --gray: #64748b;\r\n --light-gray: #e2e8f0;\r\n --white: #ffffff;\r\n --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n --hover-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);\r\n }\r\n \r\n * {\r\n margin: 0;\r\n padding: 0;\r\n \r\n }\r\n \r\n body {\r\n font-family: 'Inter', sans-serif;\r\n color: var(--dark);\r\n line-height: 1.6;\r\n min-height: 100vh;\r\n \r\n overflow-x: hidden;\r\n }\r\n \r\n .container {\r\n max-width: 1400px;\r\n margin: 60px auto;\r\n\r\n }\r\n \r\n .header {\r\n text-align: center;\r\n margin-bottom: 70px;\r\n animation: fadeIn 1s ease-out;\r\n }\r\n \r\n .header h4 {\r\n color: var(--secondary);\r\n margin: 0 0 12px 0;\r\n font-size: 16px;\r\n font-weight: 600;\r\n letter-spacing: 1.5px;\r\n text-transform: uppercase;\r\n }\r\n \r\n .header h1 {\r\n margin: 0 0 20px 0;\r\n font-size: 2.8rem;\r\n font-weight: 700;\r\n line-height: 1.2;\r\n color: var(--primary);\r\n position: relative;\r\n display: inline-block;\r\n }\r\n \r\n .header h1:after {\r\n content: '';\r\n position: absolute;\r\n bottom: -15px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n width: 80px;\r\n height: 4px;\r\n background: linear-gradient(to right, var(--secondary), var(--primary));\r\n border-radius: 2px;\r\n animation: expandLine 1.2s ease-out;\r\n }\r\n \r\n .header p {\r\n max-width: 700px;\r\n margin: 40px auto 0;\r\n color: var(--gray);\r\n font-size: 1.1rem;\r\n line-height: 1.7;\r\n }\r\n \r\n .projects-grid {\r\n display: grid;\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n .project-card {\r\n border-radius: 16px;\r\n overflow: hidden;\r\n box-shadow: var(--card-shadow);\r\n transition: all 0.4s ease;\r\n display: flex;\r\n flex-direction: column;\r\n height: 100%;\r\n background: white;\r\n position: relative;\r\n opacity: 0;\r\n transform: translateY(30px);\r\n animation: cardEntrance 0.6s ease forwards;\r\n }\r\n \r\n .project-card:nth-child(1) {\r\n animation-delay: 0.2s;\r\n }\r\n \r\n .project-card:nth-child(2) {\r\n animation-delay: 0.4s;\r\n }\r\n \r\n .project-card:nth-child(3) {\r\n animation-delay: 0.6s;\r\n }\r\n \r\n .project-card:nth-child(4) {\r\n animation-delay: 0.8s;\r\n }\r\n \r\n .project-card:hover {\r\n transform: translateY(-8px) scale(1.02);\r\n box-shadow: var(--hover-shadow);\r\n }\r\n \r\n .card-image {\r\n height: 200px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n \r\n .card-image:before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.4));\r\n z-index: 1;\r\n transition: all 0.5s ease;\r\n }\r\n \r\n .project-card:hover .card-image:before {\r\n background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.5));\r\n }\r\n \r\n .card-image img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform 0.8s ease;\r\n filter: brightness(0.9);\r\n }\r\n \r\n .project-card:hover .card-image img {\r\n transform: scale(1.1) rotate(1deg);\r\n filter: brightness(1);\r\n }\r\n \r\n .circle-badge {\r\n position: absolute;\r\n top: 15px;\r\n right: 15px;\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 50%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: white;\r\n font-size: 1.3rem;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);\r\n z-index: 2;\r\n transition: all 0.4s ease;\r\n }\r\n \r\n .project-card:hover .circle-badge {\r\n transform: scale(1.1) rotate(10deg);\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);\r\n }\r\n \r\n .card-content {\r\n padding: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n flex-grow: 1;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n \r\n .card-content:before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 5px;\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n transition: transform 0.5s ease;\r\n }\r\n \r\n .project-card:hover .card-content:before {\r\n transform: scaleX(1);\r\n }\r\n \r\n .card-title {\r\n font-size: 1.25rem;\r\n font-weight: 700;\r\n margin-bottom: 12px;\r\n line-height: 1.3;\r\n transition: color 0.3s ease;\r\n }\r\n \r\n .card-description {\r\n color: var(--gray);\r\n margin-bottom: 20px;\r\n line-height: 1.5;\r\n flex-grow: 1;\r\n font-size: 0.95rem;\r\n }\r\n \r\n .card-button {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n padding: 10px 20px;\r\n color: white;\r\n text-decoration: none;\r\n border-radius: 50px;\r\n font-weight: 600;\r\n transition: all 0.4s ease;\r\n text-align: center;\r\n box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);\r\n width: fit-content;\r\n margin-top: auto;\r\n position: relative;\r\n overflow: hidden;\r\n font-size: 0.9rem;\r\n }\r\n \r\n .card-button:before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: -100%;\r\n width: 100%;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\r\n transition: all 0.6s ease;\r\n }\r\n \r\n .card-button:hover:before {\r\n left: 100%;\r\n }\r\n \r\n .card-button:hover {\r\n transform: translateY(-3px);\r\n box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);\r\n }\r\n \r\n .card-button i {\r\n margin-left: 6px;\r\n transition: transform 0.3s ease;\r\n }\r\n \r\n .card-button:hover i {\r\n transform: translateX(4px);\r\n }\r\n \r\n \/* Color schemes for each card *\/\r\n .project-card:nth-child(1) .card-content:before {\r\n background: linear-gradient(90deg, #3a78d6 0%, #093a65 100%);\r\n }\r\n .project-card:nth-child(1) .circle-badge {\r\n background: linear-gradient(135deg, #3a78d6 0%, #093a65 100%);\r\n }\r\n .project-card:nth-child(1) .card-title {\r\n color: #093a65;\r\n }\r\n .project-card:nth-child(1) .card-button {\r\n background: linear-gradient(135deg, #3a78d6 0%, #093a65 100%);\r\n }\r\n .project-card:nth-child(1) .card-button:hover {\r\n background: linear-gradient(135deg, #093a65 0%, #3a78d6 100%);\r\n }\r\n \r\n .project-card:nth-child(2) .card-content:before {\r\n background: linear-gradient(90deg, #5cb85c 0%, #2a5c2a 100%);\r\n }\r\n .project-card:nth-child(2) .circle-badge {\r\n background: linear-gradient(135deg, #5cb85c 0%, #2a5c2a 100%);\r\n }\r\n .project-card:nth-child(2) .card-title {\r\n color: #2a5c2a;\r\n }\r\n .project-card:nth-child(2) .card-button {\r\n background: linear-gradient(135deg, #5cb85c 0%, #2a5c2a 100%);\r\n }\r\n .project-card:nth-child(2) .card-button:hover {\r\n background: linear-gradient(135deg, #2a5c2a 0%, #5cb85c 100%);\r\n }\r\n \r\n .project-card:nth-child(3) .card-content:before {\r\n background: linear-gradient(90deg, #ff6b6b 0%, #a0040d 100%);\r\n }\r\n .project-card:nth-child(3) .circle-badge {\r\n background: linear-gradient(135deg, #ff6b6b 0%, #a0040d 100%);\r\n }\r\n .project-card:nth-child(3) .card-title {\r\n color: #a0040d;\r\n }\r\n .project-card:nth-child(3) .card-button {\r\n background: linear-gradient(135deg, #ff6b6b 0%, #a0040d 100%);\r\n }\r\n .project-card:nth-child(3) .card-button:hover {\r\n background: linear-gradient(135deg, #a0040d 0%, #ff6b6b 100%);\r\n }\r\n \r\n .project-card:nth-child(4) .card-content:before {\r\n background: linear-gradient(90deg, #cc66ff 0%, #9900cc 100%);\r\n }\r\n .project-card:nth-child(4) .circle-badge {\r\n background: linear-gradient(135deg, #cc66ff 0%, #9900cc 100%);\r\n }\r\n .project-card:nth-child(4) .card-title {\r\n color: #9900cc;\r\n }\r\n .project-card:nth-child(4) .card-button {\r\n background: linear-gradient(135deg, #cc66ff 0%, #9900cc 100%);\r\n }\r\n .project-card:nth-child(4) .card-button:hover {\r\n background: linear-gradient(135deg, #9900cc 0%, #cc66ff 100%);\r\n }\r\n \r\n \/* Animations *\/\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(-20px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n @keyframes expandLine {\r\n from { width: 0; }\r\n to { width: 80px; }\r\n }\r\n \r\n @keyframes cardEntrance {\r\n from { \r\n opacity: 0; \r\n transform: translateY(30px) scale(0.95); \r\n }\r\n to { \r\n opacity: 1; \r\n transform: translateY(0) scale(1); \r\n }\r\n }\r\n \r\n \/* Floating animation for cards *\/\r\n @keyframes float {\r\n 0% { transform: translateY(0); }\r\n 50% { transform: translateY(-8px); }\r\n 100% { transform: translateY(0); }\r\n }\r\n \r\n .project-card {\r\n animation: cardEntrance 0.6s ease forwards, float 6s ease-in-out infinite;\r\n }\r\n \r\n .project-card:nth-child(1) {\r\n animation-delay: 0.2s, 0s;\r\n }\r\n \r\n .project-card:nth-child(2) {\r\n animation-delay: 0.4s, 1.5s;\r\n }\r\n \r\n .project-card:nth-child(3) {\r\n animation-delay: 0.6s, 3s;\r\n }\r\n \r\n .project-card:nth-child(4) {\r\n animation-delay: 0.8s, 4.5s;\r\n }\r\n \r\n @media (max-width: 1200px) {\r\n .projects-grid {\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 25px;\r\n }\r\n \r\n .container {\r\n margin: 50px auto;\r\n }\r\n \r\n .header h1 {\r\n font-size: 2.4rem;\r\n }\r\n }\r\n \r\n @media (max-width: 768px) {\r\n .projects-grid {\r\n grid-template-columns: 1fr;\r\n max-width: 500px;\r\n margin: 0 auto;\r\n }\r\n \r\n .container {\r\n margin: 40px auto;\r\n padding: 0 15px;\r\n }\r\n \r\n .header {\r\n margin-bottom: 50px;\r\n }\r\n \r\n .header h1 {\r\n font-size: 2.2rem;\r\n }\r\n \r\n .card-content {\r\n padding: 20px;\r\n }\r\n \r\n .card-title {\r\n font-size: 1.3rem;\r\n }\r\n \r\n \/* Disable floating animation on mobile for better performance *\/\r\n .project-card {\r\n animation: cardEntrance 0.6s ease forwards;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"container\">\r\n <div class=\"header\">\r\n <h4>Our Initiatives<\/h4>\r\n <h1>Projects & Activities<\/h1>\r\n <p>Discover how Al Jisr Association is making a difference through our diverse range of projects and initiatives that transform communities and empower individuals<\/p>\r\n <\/div>\r\n \r\n <div class=\"projects-grid\">\r\n \r\n <div class=\"project-card\">\r\n <div class=\"card-image\">\r\n <img decoding=\"async\" src=\"http:\/\/aljisrasso.com\/wp-content\/uploads\/2025\/08\/WhatsApp-Image-2025-08-23-at-11.42.11_6139466d.jpg\" alt=\"Educational Institutions\">\r\n <div class=\"circle-badge\">\r\n <i class=\"fas fa-school\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-content\">\r\n <h3 class=\"card-title\">Educational Institutions<\/h3>\r\n <p class=\"card-description\">Renovating facilities, improving infrastructure, and creating appropriate educational environments for students through maintenance and restoration work.<\/p>\r\n <a href=\"https:\/\/aljisrasso.com\/projects\/educational-institutions\/\" class=\"card-button\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"project-card\">\r\n <div class=\"card-image\">\r\n <img decoding=\"async\" src=\"http:\/\/aljisrasso.com\/wp-content\/uploads\/2025\/08\/WhatsApp-Image-2025-08-21-at-10.52.38_6adf920a.jpg\" alt=\"Environmental Activities\">\r\n <div class=\"circle-badge\">\r\n <i class=\"fas fa-leaf\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-content\">\r\n <h3 class=\"card-title\">Environmental Activities<\/h3>\r\n <p class=\"card-description\">Awareness campaigns, clean-up initiatives, recycling programs, and reforestation efforts to raise environmental awareness and preserve our planet.<\/p>\r\n <a href=\"https:\/\/aljisrasso.com\/environmental-activities\/\" class=\"card-button\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"project-card\">\r\n <div class=\"card-image\">\r\n <img decoding=\"async\" src=\"http:\/\/aljisrasso.com\/wp-content\/uploads\/2025\/08\/WhatsApp-Image-2025-08-21-at-10.34.47_d6f1930b.jpg\" alt=\"Biodiversity Activities\">\r\n <div class=\"circle-badge\">\r\n <i class=\"fas fa-seedling\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-content\">\r\n <h3 class=\"card-title\">Biodiversity Activities<\/h3>\r\n <p class=\"card-description\">Initiatives to raise student awareness about environmental importance through practical projects, ecological corridors, and school eco-clubs.<\/p>\r\n <a href=\"https:\/\/aljisrasso.com\/biodiversity-activities\/\" class=\"card-button\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <div class=\"project-card\">\r\n <div class=\"card-image\">\r\n <img decoding=\"async\" src=\"http:\/\/aljisrasso.com\/wp-content\/uploads\/2025\/08\/WhatsApp-Image-2025-08-21-at-12.43.32_047e38a3.jpg\" alt=\"Painting Projects\">\r\n <div class=\"circle-badge\">\r\n <i class=\"fas fa-paint-brush\"><\/i>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-content\">\r\n <h3 class=\"card-title\">Painting Projects<\/h3>\r\n <p class=\"card-description\">Transforming school walls into creative artistic canvases with murals to enhance knowledge, culture, and promote creativity among students.<\/p>\r\n <a href=\"https:\/\/aljisrasso.com\/painting-projects\/\" class=\"card-button\">Learn More <i class=\"fas fa-arrow-right\"><\/i><\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ Enhanced intersection observer for animations\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const projectCards = document.querySelectorAll('.project-card');\r\n \r\n \/\/ Create intersection observer\r\n const observer = new IntersectionObserver((entries) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.style.animation = 'cardEntrance 0.6s ease forwards, float 6s ease-in-out infinite';\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.1 });\r\n \r\n \/\/ Set initial state and observe elements\r\n projectCards.forEach(card => {\r\n card.style.opacity = 0;\r\n observer.observe(card);\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Projects & Activities Our Projects – Al Jisr Association Our Initiatives … <\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-297","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/aljisrasso.com\/es\/wp-json\/wp\/v2\/pages\/297","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aljisrasso.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aljisrasso.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aljisrasso.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/aljisrasso.com\/es\/wp-json\/wp\/v2\/comments?post=297"}],"version-history":[{"count":22,"href":"https:\/\/aljisrasso.com\/es\/wp-json\/wp\/v2\/pages\/297\/revisions"}],"predecessor-version":[{"id":5286,"href":"https:\/\/aljisrasso.com\/es\/wp-json\/wp\/v2\/pages\/297\/revisions\/5286"}],"wp:attachment":[{"href":"https:\/\/aljisrasso.com\/es\/wp-json\/wp\/v2\/media?parent=297"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}