{"id":3021,"date":"2025-06-13T19:18:54","date_gmt":"2025-06-13T16:18:54","guid":{"rendered":"https:\/\/ssr.org.sa\/?page_id=3021"},"modified":"2026-03-13T10:44:06","modified_gmt":"2026-03-13T07:44:06","slug":"%d8%a7%d9%84%d8%b5%d9%81%d8%ad%d8%a9-%d8%a7%d9%84%d8%b1%d8%a6%d9%8a%d8%b3%d9%8a%d8%a9","status":"publish","type":"page","link":"https:\/\/ssr.org.sa\/en\/","title":{"rendered":"Home Page"},"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\r\n\r\n\r\n \r\n \r\n \u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630<\/title>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n <style>\r\n \/* General Reset and Base Styles *\/\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n body {\r\n font-family: 'Tajawal', sans-serif;\r\n background: linear-gradient(135deg, #F7F5E6 0%, #D4D38A 100%); \/* Soft yellow\/green gradient *\/\r\n overflow-x: hidden;\r\n line-height: 1.6;\r\n color: #333; \/* Default text color *\/\r\n }\r\n\r\n \r\n \/* Top Banner Section *\/\r\n .top-banner {\r\n background: linear-gradient(135deg, #E6F7E6 0%, #D8EFD8 100%);\r\n \/* Light green gradient *\/\r\n padding: 4rem 2rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 0 0 50px 50px;\r\n \/* Rounded bottom corners *\/\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\r\n z-index: 1;\r\n \/* Ensure it's above background waves but below fixed elements if any *\/\r\n margin-bottom: 2rem;\r\n \/* Space below the banner *\/\r\n }\r\n\r\n .top-banner-inner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n max-width: 1200px;\r\n width: 100%;\r\n gap: 3rem;\r\n flex-wrap: wrap;\r\n \/* Allow wrapping on smaller screens *\/\r\n flex-direction: row-reverse;\r\n \/* Right to left for text then image *\/\r\n }\r\n\r\n .banner-text-content {\r\n flex: 1;\r\n min-width: 300px;\r\n text-align: right;\r\n \/* Right align text for RTL *\/\r\n }\r\n\r\n .banner-text-content .logo {\r\n display: flex;\r\n align-items: center;\r\n margin-bottom: 1rem;\r\n justify-content: flex-end;\r\n \/* Right align logo *\/\r\n }\r\n\r\n .banner-text-content .logo img {\r\n height: 40px;\r\n margin-left: 10px;\r\n \/* Space between logo and text *\/\r\n }\r\n\r\n .banner-text-content .logo span {\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #3B5F2A;\r\n \/* Dark green for logo text *\/\r\n }\r\n\r\n .banner-text-content h2 {\r\n font-size: 3.5rem;\r\n font-weight: 700;\r\n color: #2E3D27;\r\n \/* Darker green *\/\r\n margin-bottom: 1rem;\r\n line-height: 1.2;\r\n }\r\n\r\n .banner-text-content h2 span {\r\n color: #e0b11e;\r\n \/* yellowish color for highlight *\/\r\n }\r\n\r\n .banner-text-content p {\r\n font-size: 1.1rem;\r\n color: #5A6B4A;\r\n \/* Muted green *\/\r\n margin-bottom: 2rem;\r\n max-width: 500px;\r\n \/* Limit paragraph width *\/\r\n margin-right: 0;\r\n \/* Override default margin for text *\/\r\n margin-left: auto;\r\n \/* Push to right for RTL *\/\r\n }\r\n\r\n .banner-buttons {\r\n display: flex;\r\n gap: 1rem;\r\n justify-content: flex-end;\r\n \/* Right align buttons *\/\r\n }\r\n\r\n .banner-btn {\r\n padding: 1rem 2rem;\r\n border: none;\r\n border-radius: 30px;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n display: inline-block;\r\n text-align: center;\r\n }\r\n\r\n .banner-btn.create-project {\r\n background-color: #3B5F2A;\r\n \/* Dark green *\/\r\n color: white;\r\n }\r\n\r\n .banner-btn.create-project:hover {\r\n background-color: #4A7A38;\r\n \/* Slightly lighter green *\/\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(59, 95, 42, 0.2);\r\n }\r\n\r\n .banner-btn.create-cause {\r\n background-color: #6B8E23;\r\n \/* Lighter green *\/\r\n color: white;\r\n }\r\n\r\n .banner-btn.create-cause:hover {\r\n background-color: #7DA335;\r\n \/* Even lighter green *\/\r\n transform: translateY(-2px);\r\n box-shadow: 0 5px 15px rgba(107, 142, 35, 0.2);\r\n }\r\n\r\n .banner-image {\r\n flex: 1;\r\n min-width: 300px;\r\n text-align: left;\r\n \/* Left align image for RTL *\/\r\n position: relative;\r\n \/* Needed for absolute positioning of carousel images *\/\r\n }\r\n\r\n \/* Carousel specific styles (Option 1 applied) *\/\r\n .carousel-container {\r\n position: relative;\r\n width: 100%;\r\n height: 290px; \/* Adjust this value as needed for your images *\/\r\n overflow: hidden;\r\n border-radius: 10px;\r\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .carousel-image {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n object-fit: contain; \/* Changed from 'cover' to 'contain' to avoid cropping smaller images and show full image. Use 'cover' if you prefer filling the space and cropping instead of showing whitespace. *\/\r\n opacity: 0;\r\n transition: opacity 1s ease-in-out;\r\n }\r\n\r\n .carousel-image.active {\r\n opacity: 1;\r\n }\r\n \r\n \/* Media Query for Mobile Screens *\/\r\n@media (max-width: 768px) { \/* Adjust breakpoint as needed (e.g., 600px, 480px) *\/\r\n .carousel-container {\r\n height: 168px; \/* Adjust this height for smaller screens *\/\r\n }\r\n\r\n \/* If you find images too small or distorted on mobile, you might consider changing object-fit for mobile only *\/\r\n \/*\r\n .carousel-image {\r\n object-fit: cover;\r\n }\r\n *\/\r\n}\r\n\r\n \/* About Us Section *\/\r\n .about-us-section {\r\n background: linear-gradient(135deg, #FDFDFD 0%, #E9F4E9 100%); \/* Very light green\/white *\/\r\n padding: 6rem 2rem;\r\n text-align: center;\r\n border-radius: 20px;\r\n margin: 2rem auto;\r\n max-width: 900px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\r\n position: relative;\r\n overflow: hidden;\r\n border: 1px solid rgba(59,95,42,0.1);\r\n }\r\n\r\n .about-us-section::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' fill='%236B8E23' opacity='0.05'\/%3E%3C\/svg%3E\") repeat;\r\n background-size: 50px;\r\n opacity: 0.3;\r\n z-index: 0;\r\n animation: pulseBg 20s infinite alternate;\r\n }\r\n\r\n @keyframes pulseBg {\r\n 0% { transform: scale(1); opacity: 0.3; }\r\n 50% { transform: scale(1.02); opacity: 0.35; }\r\n 100% { transform: scale(1); opacity: 0.3; }\r\n }\r\n\r\n .about-us-content {\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .about-us-section h2 {\r\n font-size: 2.8rem;\r\n color: #3B5F2A; \/* Dark green *\/\r\n margin-bottom: 1.5rem;\r\n font-weight: 700;\r\n line-height: 1.3;\r\n }\r\n\r\n .about-us-section p {\r\n font-size: 1.2rem;\r\n color: #5A6B4A; \/* Muted green *\/\r\n line-height: 1.8;\r\n max-width: 700px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* Achievements Section (formerly Interactive Stats Grid) *\/\r\n .achievements-section {\r\n padding: 6rem 2rem; \/* Consistent padding *\/\r\n text-align: center;\r\n background: linear-gradient(135deg, #FDFDFD 0%, #E9F4E9 100%); \/* Light background *\/\r\n margin: 2rem auto;\r\n max-width: 1200px; \/* Allow wider section to contain the grid and title *\/\r\n \r\n border-radius: 20px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\r\n }\r\n\r\n .achievements-section h2 {\r\n font-size: 2.8rem;\r\n color: #3B5F2A; \/* Dark green *\/\r\n margin-bottom: 3rem; \/* More space below title *\/\r\n font-weight: 700;\r\n }\r\n\r\n .stats-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr); \/* 2 columns for all screen sizes *\/\r\n gap: 2rem;\r\n max-width: 900px; \/* **Increased max-width for the grid to give more space** *\/\r\n margin: 0 auto; \/* Center the grid *\/\r\n padding: 0 1rem; \/* Add some padding for smaller screens *\/\r\n }\r\n\r\n .stat-card {\r\n background: rgba(255,255,255,0.95);\r\n border-radius: 20px;\r\n padding: 4rem 2.5rem; \/* **Increased padding for larger card size** *\/\r\n text-align: center;\r\n box-shadow: 0 15px 35px rgba(59,95,42,0.1);\r\n border: 1px solid rgba(107,142,35,0.2);\r\n transition: all 0.4s ease;\r\n position: relative;\r\n overflow: hidden;\r\n cursor: pointer;\r\n display: flex; \/* Use flexbox to center content vertically and horizontally *\/\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .stat-card::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: linear-gradient(45deg, transparent, rgba(107,142,35,0.1), transparent);\r\n transform: rotate(45deg);\r\n transition: all 0.6s ease;\r\n opacity: 0;\r\n }\r\n\r\n .stat-card:hover::before {\r\n opacity: 1;\r\n transform: rotate(45deg) translate(50%, 50%);\r\n }\r\n\r\n .stat-card:hover {\r\n transform: translateY(-10px) scale(1.02);\r\n box-shadow: 0 25px 50px rgba(59,95,42,0.2);\r\n }\r\n\r\n .stat-number {\r\n font-size: 4rem; \/* **Increased font-size for numbers** *\/\r\n font-weight: 700;\r\n color: #3B5F2A; \/* Dark green *\/\r\n margin-bottom: 1.5rem; \/* **Increased margin-bottom for spacing** *\/\r\n position: relative;\r\n z-index: 2;\r\n line-height: 1.1; \/* Adjust line height to prevent cutting off tall numbers *\/\r\n white-space: nowrap; \/* Prevent numbers from wrapping if they fit *\/\r\n overflow: hidden; \/* Hide overflow if text is still too long *\/\r\n text-overflow: ellipsis; \/* Add ellipsis if text is cut off *\/\r\n }\r\n\r\n .stat-label {\r\n font-size: 1.4rem; \/* **Increased font-size for labels** *\/\r\n color: #5A6B4A; \/* Muted green *\/\r\n font-weight: 600;\r\n position: relative;\r\n z-index: 2;\r\n text-align: center; \/* Ensure label is centered *\/\r\n }\r\n\r\n \/* Services Section *\/\r\n.services {\r\n padding: 6rem 2rem;\r\n background: linear-gradient(135deg, rgba(255,255,255,0.8) 0%, rgba(212,211,138,0.4) 100%); \/* Light transparent background *\/\r\n position: relative;\r\n z-index: 1; \/* Ensure content is above the pseudo-element *\/\r\n}\r\n\r\n.services::before {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100px;\r\n background: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,0V46.29c47.79,22.85,103.59,32.58,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%23FFFFFF' fill-opacity='0.5'\/%3E%3C\/svg%3E\") no-repeat center top;\r\n background-size: cover;\r\n transform: rotate(180deg);\r\n z-index: -1; \/* Place behind the content *\/\r\n}\r\n\r\n.services h2 {\r\n text-align: center;\r\n font-size: 2.5rem;\r\n color: #2E3D27; \/* Darker green *\/\r\n margin-bottom: 3rem;\r\n font-weight: 600;\r\n}\r\n\r\n.services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: 2rem;\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n}\r\n\r\n.service-card {\r\n background: rgba(255,255,255,0.9);\r\n border-radius: 15px;\r\n padding: 2rem;\r\n border-right: 5px solid #6B8E23; \/* Lighter green border *\/\r\n transition: all 0.3s ease;\r\n position: relative;\r\n overflow: hidden;\r\n display: flex; \/* Added for vertical alignment of content *\/\r\n flex-direction: column; \/* Added for vertical alignment of content *\/\r\n align-items: center; \/* Center items horizontally within the card *\/\r\n text-align: center; \/* Center text within the card *\/\r\n}\r\n\r\n.service-card::after {\r\n content: '';\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 0;\r\n height: 100%;\r\n background: linear-gradient(90deg, transparent, rgba(107,142,35,0.1));\r\n transition: width 0.4s ease;\r\n}\r\n\r\n.service-card:hover::after {\r\n width: 100%;\r\n}\r\n\r\n.service-card:hover {\r\n transform: translateX(-5px);\r\n box-shadow: 0 10px 30px rgba(59,95,42,0.15);\r\n}\r\n\r\n.service-icon {\r\n \/* Removed font-size and color for text icons *\/\r\n margin-bottom: 1rem;\r\n \/* Add properties to center and size the image within this container *\/\r\n display: flex; \/* Use flexbox to center the image *\/\r\n justify-content: center; \/* Center horizontally *\/\r\n align-items: center; \/* Center vertically *\/\r\n width: 70px; \/* **Adjust this for your desired icon container width** *\/\r\n height: 70px; \/* **Adjust this for your desired icon container height** *\/\r\n \/* Optional: Add a background or border for the icon container if desired *\/\r\n \/* background-color: #E6FFE6; *\/\r\n \/* border-radius: 50%; *\/\r\n}\r\n\r\n.service-icon img {\r\n max-width: 100%; \/* Ensure image fits within the .service-icon container *\/\r\n max-height: 100%; \/* Ensure image fits within the .service-icon container *\/\r\n width: auto; \/* Maintain aspect ratio *\/\r\n height: auto; \/* Maintain aspect ratio *\/\r\n object-fit: contain; \/* Scale image to fit within the box, maintaining aspect ratio *\/\r\n \/* If you want a fixed size for the image regardless of the container, set specific width\/height here: *\/\r\n \/* width: 50px; *\/\r\n \/* height: 50px; *\/\r\n}\r\n\r\n\r\n.service-title {\r\n font-size: 1.3rem;\r\n font-weight: 600;\r\n color: #2E3D27; \/* Darker green *\/\r\n margin-bottom: 1rem;\r\n}\r\n\r\n.service-description {\r\n color: #5A6B4A; \/* Muted green *\/\r\n line-height: 1.7;\r\n}\r\n\r\n\/* Responsive adjustments for smaller screens *\/\r\n@media (max-width: 768px) {\r\n .services-grid {\r\n grid-template-columns: 1fr; \/* Stack cards on smaller screens *\/\r\n }\r\n .service-card {\r\n padding: 1.5rem;\r\n }\r\n .services h2 {\r\n font-size: 2rem;\r\n }\r\n}\r\n \/* Video Section Styles *\/\r\n .video-section {\r\n background: linear-gradient(135deg, #FDFDFD 0%, #E9F4E9 100%); \/* Similar to about-us-section *\/\r\n padding: 6rem 2rem;\r\n text-align: center;\r\n border-radius: 20px;\r\n margin: 2rem auto;\r\n max-width: 900px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\r\n position: relative;\r\n overflow: hidden;\r\n border: 1px solid rgba(59,95,42,0.1);\r\n \/* Added subtle texture *\/\r\n background-image: repeating-linear-gradient(\r\n 45deg,\r\n rgba(107, 142, 35, 0.03), \/* Very light green *\/\r\n rgba(107, 142, 35, 0.03) 5px,\r\n transparent 5px,\r\n transparent 10px\r\n );\r\n background-size: 20px 20px;\r\n }\r\n\r\n .video-section h2 {\r\n font-size: 2.8rem;\r\n color: #3B5F2A; \/* Dark green *\/\r\n margin-bottom: 1.5rem;\r\n font-weight: 700;\r\n line-height: 1.3;\r\n }\r\n\r\n .video-container {\r\n position: relative;\r\n width: 100%;\r\n \/* 16:9 aspect ratio *\/\r\n padding-bottom: 56.25%; \/* (9 \/ 16) * 100% *\/\r\n height: 0;\r\n overflow: hidden;\r\n border-radius: 15px;\r\n box-shadow: 0 8px 25px rgba(0,0,0,0.15);\r\n margin-top: 2rem;\r\n }\r\n\r\n .video-container iframe {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n border: none;\r\n border-radius: 15px; \/* Match container border-radius *\/\r\n }\r\n\r\n \/* NEW: Leadership Section Styles *\/\r\n .leadership-section {\r\n background: linear-gradient(135deg, #FDFDFD 0%, #E9F4E9 100%); \/* Similar to video-section *\/\r\n padding: 6rem 2rem;\r\n text-align: center;\r\n border-radius: 20px;\r\n margin: 2rem auto;\r\n max-width: 900px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\r\n position: relative;\r\n overflow: hidden; \/* Important for horizontal carousel *\/\r\n border: 1px solid rgba(59,95,42,0.1);\r\n \/* NEW TEXTURE: Subtle grid pattern *\/\r\n background-image:\r\n linear-gradient(to right, rgba(107, 142, 35, 0.04) 1px, transparent 1px),\r\n linear-gradient(to bottom, rgba(107, 142, 35, 0.04) 1px, transparent 1px);\r\n background-size: 20px 20px; \/* Size of each cell in the grid *\/\r\n }\r\n\r\n .leadership-section h2 {\r\n font-size: 2.8rem;\r\n color: #3B5F2A; \/* Dark green *\/\r\n margin-bottom: 1rem; \/* Less space for subtitle below *\/\r\n font-weight: 700;\r\n line-height: 1.3;\r\n }\r\n\r\n .leadership-section h3 {\r\n font-size: 1.5rem; \/* Subtitle size *\/\r\n color: #5A6B4A; \/* Muted green *\/\r\n margin-bottom: 3rem; \/* Space before carousel *\/\r\n font-weight: 500;\r\n }\r\n\r\n .leadership-carousel-wrapper {\r\n position: relative; \/* For absolute positioning of arrows *\/\r\n max-width: 100%; \/* Ensure it fits within its parent *\/\r\n margin: 0 auto;\r\n display: flex; \/* To align arrows and carousel *\/\r\n align-items: center; \/* Vertically align items *\/\r\n justify-content: center; \/* Center content *\/\r\n }\r\n\r\n .leadership-carousel {\r\n display: flex;\r\n gap: 2rem; \/* Space between carousel items *\/\r\n overflow-x: auto; \/* Enable horizontal scrolling *\/\r\n scroll-snap-type: x mandatory; \/* Smooth snapping effect *\/\r\n -webkit-overflow-scrolling: touch; \/* Enable smooth scrolling on iOS *\/\r\n scrollbar-width: none; \/* Hide scrollbar for Firefox *\/\r\n -ms-overflow-style: none; \/* Hide scrollbar for IE\/Edge *\/\r\n padding-bottom: 0; \/* No space for scrollbar if hidden *\/\r\n }\r\n\r\n \/* Hide scrollbar for Webkit browsers *\/\r\n .leadership-carousel::-webkit-scrollbar {\r\n display: none;\r\n }\r\n\r\n .carousel-item {\r\n flex-shrink: 0; \/* Prevent items from shrinking *\/\r\n width: 200px; \/* Fixed width for each item *\/\r\n height: 200px; \/* Fixed height for each item *\/\r\n border-radius: 10px; \/* Changed to squares with small radius *\/\r\n overflow: hidden; \/* Hide parts of image outside the shape *\/\r\n box-shadow: 0 5px 15px rgba(0,0,0,0.1); \/* Subtle shadow for each image *\/\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n scroll-snap-align: center; \/* Snap items to center when scrolling *\/\r\n border: 3px solid #6B8E23; \/* Green border around images *\/\r\n }\r\n\r\n .carousel-item img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover; \/* Cover the entire area *\/\r\n display: block;\r\n }\r\n\r\n .carousel-item:hover {\r\n transform: scale(1.05);\r\n box-shadow: 0 8px 20px rgba(0,0,0,0.2);\r\n }\r\n\r\n \/* Navigation Arrows *\/\r\n .carousel-nav {\r\n background-color: #6B8E23; \/* Green *\/\r\n color: white;\r\n border: none;\r\n border-radius: 50%;\r\n width: 50px;\r\n height: 50px;\r\n font-size: 1.5rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n position: absolute; \/* Position relative to wrapper *\/\r\n top: 50%;\r\n transform: translateY(-50%);\r\n z-index: 10;\r\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\r\n transition: background-color 0.3s ease, transform 0.3s ease;\r\n }\r\n\r\n .carousel-nav.prev-btn {\r\n right: -25px; \/* Position outside to the right for RTL \"previous\" *\/\r\n }\r\n\r\n .carousel-nav.next-btn {\r\n left: -25px; \/* Position outside to the left for RTL \"next\" *\/\r\n }\r\n\r\n .carousel-nav svg {\r\n width: 60%;\r\n height: 60%;\r\n }\r\n\r\n .carousel-nav:hover:not(:disabled) {\r\n background-color: #7DA335;\r\n transform: translateY(-50%) scale(1.1);\r\n }\r\n\r\n .carousel-nav:disabled {\r\n background-color: #ccc;\r\n cursor: not-allowed;\r\n opacity: 0.6;\r\n }\r\n\r\n \/* Dots Indicator *\/\r\n .carousel-dots {\r\n display: flex;\r\n justify-content: center;\r\n margin-top: 2rem;\r\n gap: 0.8rem;\r\n }\r\n\r\n .carousel-dot {\r\n width: 12px;\r\n height: 12px;\r\n background-color: #ccc;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease, transform 0.3s ease;\r\n }\r\n\r\n .carousel-dot.active {\r\n background-color: #6B8E23; \/* Active dot color *\/\r\n transform: scale(1.2);\r\n }\r\n\r\n .carousel-dot:hover {\r\n background-color: #888;\r\n }\r\n\r\n \/* CTA Section *\/\r\n .cta-section {\r\n padding: 6rem 2rem;\r\n background: linear-gradient(135deg, #3B5F2A 0%, #6B8E23 100%); \/* Green gradient *\/\r\n text-align: center;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n\r\n .cta-section::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: repeating-linear-gradient(\r\n 45deg,\r\n transparent,\r\n transparent 10px,\r\n rgba(255,255,255,0.05) 10px,\r\n rgba(255,255,255,0.05) 20px\r\n );\r\n animation: slide 20s linear infinite;\r\n }\r\n\r\n @keyframes slide {\r\n 0% { transform: translate(-50%, -50%) rotate(0deg); }\r\n 100% { transform: translate(-50%, -50%) rotate(360deg); }\r\n }\r\n\r\n .cta-content {\r\n position: relative;\r\n z-index: 2;\r\n max-width: 600px;\r\n margin: 0 auto;\r\n }\r\n\r\n .cta-section h2 {\r\n font-size: 2.5rem;\r\n color: white;\r\n margin-bottom: 1.5rem;\r\n font-weight: 600;\r\n }\r\n\r\n .cta-section p {\r\n font-size: 1.2rem;\r\n color: rgba(255,255,255,0.9);\r\n margin-bottom: 3rem;\r\n }\r\n\r\n .cta-buttons {\r\n display: flex;\r\n gap: 1.5rem;\r\n justify-content: center;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .cta-btn {\r\n padding: 1.2rem 2.5rem;\r\n border: none;\r\n border-radius: 50px;\r\n font-size: 1.1rem;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: all 0.3s ease;\r\n text-decoration: none;\r\n display: inline-block;\r\n position: relative;\r\n overflow: hidden;\r\n color: #2E3D27; \/* Darker green for text *\/\r\n }\r\n\r\n .cta-btn::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 0;\r\n height: 0;\r\n background: rgba(255,255,255,0.2);\r\n border-radius: 50%;\r\n transition: all 0.4s ease;\r\n transform: translate(-50%, -50%);\r\n }\r\n\r\n .cta-btn:hover::before {\r\n width: 300px;\r\n height: 300px;\r\n }\r\n\r\n .cta-btn.primary {\r\n background: #FFD700; \/* Gold\/yellow *\/\r\n color: #2E3D27; \/* Darker green *\/\r\n }\r\n\r\n .cta-btn.primary:hover {\r\n background: #FFC107; \/* Slightly darker gold\/yellow *\/\r\n transform: translateY(-3px);\r\n box-shadow: 0 10px 25px rgba(255,215,0,0.3);\r\n }\r\n\r\n .cta-btn.secondary {\r\n background: transparent;\r\n color: white;\r\n border: 2px solid white;\r\n }\r\n\r\n .cta-btn.secondary:hover {\r\n background: white;\r\n color: #3B5F2A; \/* Dark green *\/\r\n transform: translateY(-3px);\r\n }\r\n\r\n \/* Footer *\/\r\n footer {\r\n background: #2E3D27; \/* Darker green *\/\r\n color: white;\r\n padding: 3rem 2rem 1rem;\r\n text-align: center;\r\n }\r\n\r\n .footer-content {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n }\r\n\r\n .footer-links {\r\n display: flex;\r\n justify-content: center;\r\n gap: 2rem;\r\n margin-bottom: 2rem;\r\n flex-wrap: wrap;\r\n }\r\n\r\n .footer-links a {\r\n color: rgba(255,255,255,0.8);\r\n text-decoration: none;\r\n transition: color 0.3s ease;\r\n }\r\n\r\n .footer-links a:hover {\r\n color: #D4D38A; \/* Lighter yellow\/green *\/\r\n }\r\n\r\n .footer-bottom {\r\n border-top: 1px solid rgba(255,255,255,0.2);\r\n padding-top: 1rem;\r\n margin-top: 2rem;\r\n color: rgba(255,255,255,0.6);\r\n }\r\n\r\n \/* Animations *\/\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: 768px) {\r\n .top-banner {\r\n padding: 3rem 1rem;\r\n border-radius: 0 0 30px 30px;\r\n }\r\n\r\n .top-banner-inner {\r\n flex-direction: column-reverse; \/* Put image on top on mobile *\/\r\n text-align: center; \/* Center text for mobile *\/\r\n gap: 2rem;\r\n }\r\n\r\n .banner-text-content {\r\n text-align: center; \/* Center text content *\/\r\n min-width: unset;\r\n }\r\n\r\n .banner-text-content .logo {\r\n justify-content: center; \/* Center logo *\/\r\n }\r\n\r\n .banner-text-content h2 {\r\n font-size: 2.5rem;\r\n }\r\n\r\n .banner-text-content p {\r\n max-width: 90%;\r\n margin-left: auto;\r\n margin-right: auto;\r\n }\r\n\r\n .banner-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center; \/* Center buttons *\/\r\n }\r\n\r\n .banner-btn {\r\n width: 90%; \/* Make buttons full width *\/\r\n max-width: 250px;\r\n }\r\n\r\n .about-us-section {\r\n padding: 4rem 1.5rem;\r\n }\r\n\r\n .about-us-section h2 {\r\n font-size: 2rem;\r\n }\r\n\r\n .about-us-section p {\r\n font-size: 1rem;\r\n }\r\n\r\n \/* Adjustments for Achievements Section on mobile *\/\r\n .stats-grid {\r\n grid-template-columns: 1fr; \/* **Changed to 1 column on smaller mobile screens** *\/\r\n gap: 1.5rem; \/* **Adjusted: Slightly larger gap on mobile** *\/\r\n max-width: 90%; \/* Adjust max-width for better fitting on small screens *\/\r\n padding: 0; \/* Remove extra padding, let the max-width handle it *\/\r\n }\r\n\r\n .stat-card {\r\n padding: 2.5rem 1.5rem; \/* **Adjusted: Increased padding for smaller cards** *\/\r\n }\r\n .stat-number {\r\n font-size: 3rem; \/* **Adjusted: Larger numbers for mobile** *\/\r\n margin-bottom: 0.8rem; \/* Adjusted margin *\/\r\n }\r\n .stat-label {\r\n font-size: 1.1rem; \/* **Adjusted: Larger labels for mobile** *\/\r\n }\r\n\r\n .services h2 {\r\n text-align: center; \/* Ensure service heading is centered *\/\r\n }\r\n\r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n justify-items: center; \/* Center individual grid items horizontally *\/\r\n }\r\n\r\n .service-card {\r\n text-align: center; \/* Center text within service cards *\/\r\n width: 90%; \/* Adjust width for better appearance on small screens *\/\r\n max-width: 400px; \/* Limit max width *\/\r\n margin: 0 auto; \/* Center the card itself *\/\r\n border-right: none; \/* Remove border-right on mobile *\/\r\n border-bottom: 5px solid #6B8E23; \/* Add border to bottom *\/\r\n }\r\n\r\n \/* NEW: Adjust font size for video-section h2 on mobile *\/\r\n .video-section h2 {\r\n font-size: 2rem; \/* Adjusted for smaller screens *\/\r\n }\r\n\t\t\t\r\n\r\n \/* NEW: Responsive adjustments for leadership section *\/\r\n .leadership-section {\r\n padding: 4rem 1rem;\r\n max-width: 95%; \/* Adjust max-width for better mobile fit *\/\r\n }\r\n\r\n .leadership-section h2 {\r\n font-size: 2rem;\r\n }\r\n\r\n .leadership-section h3 {\r\n font-size: 1.2rem;\r\n margin-bottom: 2rem;\r\n }\r\n\r\n .leadership-carousel-wrapper {\r\n \/* Adjust positioning for smaller screens *\/\r\n margin: 0 auto;\r\n }\r\n .carousel-item {\r\n width: 150px; \/* Smaller size for mobile *\/\r\n height: 150px;\r\n }\r\n .carousel-nav {\r\n width: 40px;\r\n height: 40px;\r\n font-size: 1.2rem;\r\n right: -10px; \/* Adjust positioning for mobile *\/\r\n left: -10px; \/* Adjust positioning for mobile *\/\r\n }\r\n .carousel-dots {\r\n margin-top: 1rem; \/* Closer dots on mobile *\/\r\n }\r\n\r\n .cta-buttons {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .cta-btn {\r\n width: 100%;\r\n max-width: 300px;\r\n }\r\n\r\n .footer-content {\r\n text-align: center; \/* Center content within footer *\/\r\n }\r\n\r\n .footer-links {\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n }\r\n\r\n \/* Responsive Adjustments for Tablet (e.g., 768px to 1024px) - specifically for the stats grid *\/\r\n @media (min-width: 769px) and (max-width: 1024px) {\r\n .stats-grid {\r\n grid-template-columns: repeat(2, 1fr); \/* Ensure 2 columns on tablets *\/\r\n max-width: 800px; \/* **Adjusted max-width for tablet view** *\/\r\n margin: 0 auto;\r\n padding: 0 1.5rem;\r\n }\r\n .stat-card {\r\n padding: 3rem 2rem; \/* Restore slightly larger padding for tablets *\/\r\n }\r\n .stat-number {\r\n font-size: 3.5rem; \/* Restore slightly larger numbers for tablets *\/\r\n }\r\n .stat-label {\r\n font-size: 1.2rem; \/* Restore slightly larger labels for tablets *\/\r\n }\r\n\r\n \/* NEW: Responsive adjustments for leadership section on tablet *\/\r\n .leadership-section {\r\n max-width: 800px; \/* Adjust max-width for tablet *\/\r\n }\r\n .carousel-nav.prev-btn { right: -15px; }\r\n .carousel-nav.next-btn { left: -15px; }\r\n }\r\n\r\n \/* Scroll Animation *\/\r\n .scroll-reveal {\r\n opacity: 0;\r\n transform: translateY(50px);\r\n transition: all 0.8s ease;\r\n }\r\n\r\n .scroll-reveal.revealed {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n\t\t\r\n\/* NEW: How to Support Us Section Styles - Returned to Heavier Organic\/Diagonal Pattern, Original Colors, No Symbols *\/\r\n.support-us-section {\r\n background: linear-gradient(135deg, #FDFDFD 0%, #E9F4E9 100%); \/* Original light background *\/\r\n padding: 6rem 2rem;\r\n text-align: center;\r\n border-radius: 20px;\r\n margin: 2rem auto;\r\n max-width: 1000px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.08);\r\n position: relative;\r\n overflow: hidden;\r\n border: 1px solid rgba(59,95,42,0.1);\r\n\r\n \/* --- REVERTED TO HEAVIER HEARTFELT BACKGROUND TEXTURE (NO SYMBOLS) --- *\/\r\n background-image:\r\n \/* Top-left subtle organic shape *\/\r\n radial-gradient(circle at 10% 10%, rgba(59, 95, 42, 0.08) 0%, transparent 40%),\r\n \/* Bottom-right subtle organic shape *\/\r\n radial-gradient(circle at 90% 90%, rgba(107, 142, 35, 0.07) 0%, transparent 35%),\r\n \/* Overall very subtle diagonal lines or cross-hatch for texture *\/\r\n repeating-linear-gradient(\r\n 45deg,\r\n rgba(59, 95, 42, 0.02),\r\n rgba(59, 95, 42, 0.02) 3px,\r\n transparent 3px,\r\n transparent 9px\r\n ),\r\n repeating-linear-gradient(\r\n -45deg,\r\n rgba(107, 142, 35, 0.02),\r\n rgba(107, 142, 35, 0.02) 3px,\r\n transparent 3px,\r\n transparent 9px\r\n );\r\n background-size: 150px 150px, 150px 150px, 25px 25px, 25px 25px;\r\n background-position: top left, bottom right, 0 0, 0 0;\r\n background-repeat: no-repeat, no-repeat, repeat, repeat;\r\n \/* --- END REVERTED TEXTURE --- *\/\r\n}\r\n\r\n.support-us-section h2 {\r\n font-size: 2.8rem;\r\n color: #3B5F2A; \/* Dark green *\/\r\n margin-bottom: 1rem;\r\n font-weight: 700;\r\n line-height: 1.3;\r\n}\r\n\r\n.support-us-section > p { \/* Target the main descriptive paragraph *\/\r\n font-size: 1.2rem;\r\n color: #5A6B4A; \/* Muted green *\/\r\n margin-bottom: 3rem;\r\n max-width: 700px;\r\n margin-left: auto;\r\n margin-right: auto;\r\n}\r\n\r\n.support-content-wrapper {\r\n display: flex;\r\n flex-wrap: wrap; \/* Allows wrapping on smaller screens *\/\r\n justify-content: center;\r\n gap: 2.5rem; \/* Space between bank accounts and license info *\/\r\n}\r\n\r\n.bank-accounts,\r\n.license-info {\r\n background: rgba(255, 255, 255, 0.9);\r\n border-radius: 15px;\r\n padding: 2.5rem;\r\n box-shadow: 0 8px 20px rgba(0, 0, 0, 0.07);\r\n transition: all 0.3s ease;\r\n text-align: right; \/* RTL alignment *\/\r\n flex: 1; \/* Allows them to grow and shrink *\/\r\n min-width: 300px; \/* Minimum width before wrapping *\/\r\n max-width: 450px; \/* Max width for single column on wider screens *\/\r\n border-right: 5px solid #6B8E23; \/* Original accent border *\/\r\n position: relative; \/* For the subtle inner organic shapes *\/\r\n overflow: hidden;\r\n}\r\n\r\n\/* Subtle, organic shapes inside the cards (retained) *\/\r\n.bank-accounts::before,\r\n.license-info::before {\r\n content: '';\r\n position: absolute;\r\n top: -10px;\r\n right: -10px;\r\n width: 50px;\r\n height: 50px;\r\n background: radial-gradient(circle at center, rgba(107, 142, 35, 0.1) 0%, transparent 60%);\r\n border-radius: 50%;\r\n z-index: 0;\r\n transition: transform 0.3s ease;\r\n}\r\n\r\n.bank-accounts:hover::before,\r\n.license-info:hover::before {\r\n transform: scale(1.05) translate(5px, 5px);\r\n}\r\n\r\n.bank-accounts::after,\r\n.license-info::after {\r\n content: '';\r\n position: absolute;\r\n bottom: -10px;\r\n left: -10px;\r\n width: 40px;\r\n height: 40px;\r\n background: radial-gradient(circle at center, rgba(59, 95, 42, 0.08) 0%, transparent 60%);\r\n border-radius: 50%;\r\n z-index: 0;\r\n transition: transform 0.3s ease;\r\n}\r\n\r\n.bank-accounts:hover::after,\r\n.license-info:hover::after {\r\n transform: scale(1.05) translate(-5px, -5px);\r\n}\r\n\r\n\r\n.bank-accounts h3,\r\n.license-info h3 {\r\n font-size: 1.8rem;\r\n color: #2E3D27; \/* Darker green *\/\r\n margin-bottom: 1.5rem;\r\n font-weight: 700;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n.account-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 1.5rem;\r\n}\r\n\r\n.account-item {\r\n display: flex;\r\n align-items: center; \/* Vertically align items *\/\r\n gap: 1rem;\r\n background: #F8FFF8; \/* Slightly different background for individual items *\/\r\n border-radius: 10px;\r\n padding: 1rem 1.5rem;\r\n box-shadow: inset 0 0 8px rgba(59, 95, 42, 0.05); \/* Inner subtle shadow *\/\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n.bank-logo img {\r\n width: 90px;\r\n height: 90px;\r\n object-fit: contain;\r\n border-radius: 10px;\r\n}\r\n\r\n.account-details {\r\n flex-grow: 1;\r\n text-align: right; \/* RTL *\/\r\n}\r\n\r\n.account-details p {\r\n margin: 0;\r\n color: #5A6B4A;\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n display: flex; \/* Flex for text and copy button *\/\r\n justify-content: flex-end; \/* Push to right *\/\r\n align-items: center;\r\n gap: 0.5rem;\r\n}\r\n\r\n.account-details .bank-name {\r\n font-weight: 600;\r\n color: #3B5F2A;\r\n font-size: 1.1rem;\r\n margin-bottom: 0.2rem;\r\n\ttext-align:Center;\r\n}\r\n\r\n.copyable-text {\r\n direction: ltr; \/* Ensure numbers\/IBAN are read left-to-right *\/\r\n unicode-bidi: embed; \/* Ensure proper bidirectional text display *\/\r\n font-weight: 500;\r\n color: #2E3D27;\r\n}\r\n\r\n.copy-btn {\r\n background-color: #6B8E23; \/* Original green *\/\r\n color: white;\r\n border: none;\r\n border-radius: 5px;\r\n padding: 0.4rem 0.8rem;\r\n font-size: 0.85rem;\r\n cursor: pointer;\r\n transition: background-color 0.2s ease, transform 0.2s ease;\r\n flex-shrink: 0;\r\n box-shadow: none;\r\n}\r\n\r\n.copy-btn:hover {\r\n background-color: #7DA335;\r\n transform: translateY(-1px);\r\n box-shadow: none;\r\n}\r\n\r\n.copy-btn:active {\r\n background-color: #5A7E27;\r\n transform: translateY(0);\r\n box-shadow: none;\r\n}\r\n\r\n\r\n.license-card {\r\n background: #F8FFF8; \/* Similar background to account items *\/\r\n border-radius: 10px;\r\n padding: 1.5rem;\r\n box-shadow: inset 0 0 8px rgba(59, 95, 42, 0.05);\r\n text-align: center; \/* Center content in license card *\/\r\n position: relative;\r\n z-index: 1;\r\n}\r\n\r\n.license-card p {\r\n margin: 0;\r\n color: #5A6B4A;\r\n font-size: 1.1rem;\r\n line-height: 1.6;\r\n}\r\n\r\n.license-number {\r\n font-size: 1.3rem;\r\n font-weight: 700;\r\n color: #3B5F2A;\r\n margin-top: 0.5rem;\r\n display: flex; \/* For text and copy button *\/\r\n justify-content: center; \/* Center them *\/\r\n align-items: center;\r\n gap: 0.5rem;\r\n}\r\n\r\n\/* Responsive Adjustments for How to Support Us section *\/\r\n@media (max-width: 767px) {\r\n .support-us-section {\r\n padding: 4rem 1.5rem;\r\n }\r\n .support-us-section h2 {\r\n font-size: 2.2rem;\r\n }\r\n .support-us-section > p {\r\n font-size: 1rem;\r\n margin-bottom: 2rem;\r\n }\r\n .bank-accounts,\r\n .license-info {\r\n padding: 2rem 1.5rem;\r\n min-width: unset; \/* Allow full width *\/\r\n max-width: 100%; \/* Take full width on mobile *\/\r\n border-right: none;\r\n border-bottom: 5px solid #6B8E23; \/* Bottom border for mobile cards *\/\r\n }\r\n .bank-accounts h3,\r\n .license-info h3 {\r\n font-size: 1.6rem;\r\n }\r\n .account-item {\r\n flex-direction: column; \/* Stack logo and details vertically *\/\r\n align-items: center;\r\n text-align: center;\r\n }\r\n .bank-logo img {\r\n width: 90px;\r\n height: 90px;\r\n }\r\n .account-details {\r\n text-align: center; \/* Center text on mobile *\/\r\n width: 100%; \/* Take full width *\/\r\n }\r\n .account-details p {\r\n justify-content: center; \/* Center text and copy button *\/\r\n }\r\n .license-card p {\r\n font-size: 1rem;\r\n }\r\n .license-number {\r\n font-size: 1.2rem;\r\n }\r\n}\r\n\t\r\n\r\n\r\n\/* Custom CSS Variables (ensure these are unique or match your existing ones) *\/\r\n:root {\r\n --primary-green-em: #3B5F2A; \/* Darker green from the website header *\/\r\n --light-green-em: #8BC34A; \/* Lighter green from the \"Donate Now\" button *\/\r\n --partners-section-bg-em: #E8F5E9; \/* Color sampled from the \"Partners\" section background *\/\r\n --em-text-dark: #333;\r\n --em-text-light: #3B5F2A;\r\n --em-card-background: #ffffff;\r\n --em-shadow-color: rgba(0, 0, 0, 0.1);\r\n --gold-award: #FFD700; \/* Gold color for award feel *\/\r\n --gold-award-dark: #DAA520; \/* Darker gold *\/\r\n}\r\n\r\n\/* Container for the entire Employees of the Month section *\/\r\n.employees-of-the-month-section {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 20px 0;\r\n max-width: 1200px;\r\n margin: 40px auto;\r\n box-sizing: border-box;\r\n}\r\n\r\n\/* Title Section Styling *\/\r\n.employees-section-title {\r\n font-family: 'Tajawal', sans-serif;\r\n font-size: 2.8em;\r\n font-weight: 700;\r\n color: var(--primary-green-em); \/* Keep the primary green for text *\/\r\n background: linear-gradient(135deg, var(--gold-award-dark) 0%, var(--gold-award) 100%); \/* Gold gradient background *\/\r\n padding: 20px 40px; \/* Increased padding *\/\r\n border-radius: 50px; \/* More rounded, pill-like shape *\/\r\n margin-bottom: 40px; \/* Increased margin for more separation *\/\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); \/* Stronger, more prominent shadow *\/\r\n width: fit-content;\r\n max-width: 90%;\r\n text-align: center;\r\n position: relative; \/* For pseudo-elements *\/\r\n overflow: hidden; \/* Important for any inner decorations *\/\r\n border: 2px solid var(--gold-award-dark); \/* A subtle border *\/\r\n letter-spacing: 1px; \/* Slightly more spaced letters *\/\r\n animation: pulseGlow 2s infinite alternate; \/* Add a subtle pulse animation *\/\r\n}\r\n\r\n\/* Optional: Add a subtle inner glow or decoration *\/\r\n.employees-section-title::before {\r\n content: '';\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n width: 120%;\r\n height: 120%;\r\n background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%);\r\n transform: translate(-50%, -50%);\r\n border-radius: 50%;\r\n opacity: 0.5;\r\n pointer-events: none;\r\n z-index: 0;\r\n}\r\n\r\n\/* Keyframe animation for the pulse effect *\/\r\n@keyframes pulseGlow {\r\n 0% {\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3), 0 0 0px var(--gold-award);\r\n }\r\n 100% {\r\n box-shadow: 0 10px 35px rgba(0, 0, 0, 0.4), 0 0 15px var(--gold-award);\r\n }\r\n}\r\n\r\n\r\n\/* Employees Cards Container (Grid Layout) *\/\r\n.employees-container {\r\n display: grid;\r\n gap: 30px;\r\n width: 100%;\r\n padding: 0 15px;\r\n box-sizing: border-box;\r\n}\r\n\r\n\/* Individual Employee Card Styling *\/\r\n.employee-card {\r\n background-color: var(--em-card-background);\r\n border-radius: 15px;\r\n box-shadow: 0 10px 30px var(--em-shadow-color);\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n padding: 25px;\r\n text-align: center;\r\n transition: transform 0.3s ease, box-shadow 0.3s ease;\r\n overflow: hidden;\r\n position: relative;\r\n border: 1px solid rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.employee-card:hover {\r\n transform: translateY(-8px);\r\n box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n.employee-card img {\r\n width: 150px;\r\n height: 150px;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n margin-bottom: 20px;\r\n border: 4px solid var(--light-green-em);\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);\r\n \/* Ensure image doesn't shrink too much on smaller screens *\/\r\n min-width: 100px; \/* Example: minimum image width *\/\r\n min-height: 100px;\r\n}\r\n\r\n.employee-info .employee-name {\r\n font-family: 'Tajawal', sans-serif;\r\n font-weight: 700;\r\n color: var(--primary-green-em);\r\n font-size: 1.8em;\r\n margin-bottom: 8px;\r\n}\r\n\r\n.employee-info .employee-achievement {\r\n font-family: 'Tajawal', sans-serif;\r\n font-weight: 400;\r\n font-size: 1.1em;\r\n color: #666;\r\n line-height: 1.5;\r\n}\r\n\r\n\/* Responsive Media Queries *\/\r\n\r\n\/* Mobile styles *\/\r\n@media (max-width: 767px) {\r\n .employees-container {\r\n \/* Use auto-fit with minmax to prevent shrinking and use available space *\/\r\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); \/* Adjusted minmax value *\/\r\n \/* Lower the gap slightly on very small screens to fit more *\/\r\n gap: 20px;\r\n padding: 0 10px; \/* Reduce horizontal padding to use more width *\/\r\n }\r\n .employee-card {\r\n padding: 15px; \/* Slightly less padding to make room *\/\r\n \/* Ensure card doesn't shrink below a certain point *\/\r\n min-width: 140px; \/* Should match minmax for grid-template-columns *\/\r\n }\r\n .employee-card img {\r\n width: 100px; \/* Adjust image size for mobile *\/\r\n height: 100px;\r\n min-width: 80px; \/* A minimum for very small screens *\/\r\n min-height: 80px;\r\n margin-bottom: 15px;\r\n }\r\n .employee-info .employee-name {\r\n font-size: 1.4em; \/* Smaller font size for mobile *\/\r\n }\r\n .employee-info .employee-achievement {\r\n font-size: 0.9em; \/* Smaller font size for mobile *\/\r\n }\r\n .employees-section-title {\r\n font-size: 1.8em; \/* Adjusted title size for mobile *\/\r\n padding: 15px 25px; \/* Adjust padding for mobile title *\/\r\n border-radius: 40px; \/* Slightly less rounded on mobile *\/\r\n margin-bottom: 30px;\r\n }\r\n \/* Ensure the main section also has good padding to the sides on mobile *\/\r\n .employees-of-the-month-section {\r\n padding: 15px 10px; \/* Reduced overall section padding *\/\r\n\r\n }\r\n}\r\n\r\n\/* Tablet and larger mobile landscape (adjust as needed) *\/\r\n@media (min-width: 768px) and (max-width: 1023px) {\r\n .employees-container {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px; \/* Slightly reduce gap for tablets if desired *\/\r\n }\r\n .employee-card img {\r\n width: 130px; \/* Slightly smaller images for tablets *\/\r\n height: 130px;\r\n }\r\n}\r\n\r\n\/* Desktop styles (2 rows, 3 columns) *\/\r\n@media (min-width: 1024px) {\r\n .employees-container {\r\n grid-template-columns: repeat(3, 1fr);\r\n grid-auto-rows: minmax(auto, auto);\r\n }\r\n .employee-card {\r\n padding: 30px;\r\n }\r\n .employee-card img {\r\n width: 160px;\r\n height: 160px;\r\n }\r\n .employee-info .employee-name {\r\n font-size: 2em;\r\n }\r\n .employee-info .employee-achievement {\r\n font-size: 1.15em;\r\n }\r\n}\r\n\r\n\/* Tablet and larger mobile landscape (adjust as needed) *\/\r\n@media (min-width: 768px) and (max-width: 1023px) {\r\n .employees-container {\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 25px; \/* Slightly reduce gap for tablets if desired *\/\r\n }\r\n .employee-card img {\r\n width: 130px; \/* Slightly smaller images for tablets *\/\r\n height: 130px;\r\n }\r\n}\r\n\r\n\/* Desktop styles (2 rows, 3 columns) *\/\r\n@media (min-width: 1024px) {\r\n .employees-container {\r\n grid-template-columns: repeat(3, 1fr);\r\n grid-auto-rows: minmax(auto, auto);\r\n }\r\n .employee-card {\r\n padding: 30px;\r\n }\r\n .employee-card img {\r\n width: 160px;\r\n height: 160px;\r\n }\r\n .employee-info .employee-name {\r\n font-size: 2em;\r\n }\r\n .employee-info .employee-achievement {\r\n font-size: 1.15em;\r\n }\r\n}\t\r\n\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<section class=\"top-banner\">\r\n <div class=\"top-banner-inner\">\r\n <div class=\"banner-image\">\r\n <div class=\"carousel-container\">\r\n <\/div>\r\n <\/div>\r\n <div class=\"banner-text-content\">\r\n <div class=\"logo\">\r\n <\/div>\r\n <h2>\u0643\u0646 \u0627\u0644\u064a\u062f<br> <span>\u0627\u0644\u064e\u0651\u062a\u0650\u064a \u062a\u064f\u0633\u0627\u0639\u062f<\/span><\/h2>\r\n <p>\u0646\u062c\u062a\u0645\u0639 \u0639\u0644\u0649 \u0646\u064a\u0629 \u0627\u0644\u062e\u064a\u0631\u060c \u0648\u0646\u0632\u0631\u0639 \u0627\u0644\u0623\u062b\u0631 \u0641\u064a \u0643\u0644 \u0645\u0643\u0627\u0646\u060c \u0644\u0639\u0644 \u0627\u0644\u0644\u0647 \u064a\u062c\u0639\u0644\u0646\u0627 \u0633\u0628\u0628\u064b\u0627 \u0641\u064a \u0633\u0639\u0627\u062f\u0629 \u0623\u062d\u062f\u0647\u0645.<\/p>\r\n <div class=\"banner-buttons\">\r\n <a href=\"https:\/\/hub.ssr.org.sa\/\" class=\"banner-btn create-project\">\u062a\u0637\u0648\u0639 \u0645\u0639\u0646\u0627<\/a>\r\n <a href=\"https:\/\/ssr.org.sa\/contact-us-2\" class=\"banner-btn create-cause\">\u062a\u0648\u0627\u0635\u0644 \u0645\u0639\u0646\u0627<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n \r\n\r\n\r\n\r\n <section class=\"about-us-section scroll-reveal\">\r\n <div class=\"about-us-content\">\r\n <h2>\u0645\u0646 \u0646\u062d\u0646 \u061f<\/h2>\r\n <p>\u0646\u062d\u0646 \u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0628\u062f\u0623\u0646\u0627 \u0639\u0627\u0645 2016 \u0645\u0646 \u0645\u062f\u064a\u0646\u0629 \u062c\u062f\u0629\u060c \u0628\u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u062a\u0648\u0627\u0636\u0639\u0629 \u0645\u0646 \u0627\u0644\u0634\u0628\u0627\u0628 \u0646\u0630\u0631\u0648\u0627 \u0623\u0646\u0641\u0633\u0647\u0645 \u0644\u0645\u0633\u0627\u0639\u062f\u0629 \u0627\u0644\u0646\u0627\u0633 \u0648\u0634\u0643\u0644\u0648\u0627 \u0641\u0631\u064a\u0642\u064b\u0627 \u064a\u0642\u062f\u0645 \u062e\u062f\u0645\u0627\u062a\u0647 \u0644\u0643\u0627\u0641\u0629 \u0645\u0646\u0627\u0637\u0642 \u0627\u0644\u0645\u0645\u0644\u0643\u0629 \u062a\u062d\u062a \u0645\u0638\u0644\u0629 \u0627\u0644\u062f\u0641\u0627\u0639 \u0627\u0644\u0645\u062f\u0646\u064a \u0648\u0625\u0634\u0631\u0627\u0641 \u0645\u0646 \u0645\u062c\u0645\u0648\u0639\u0629 \u0645\u0646 \u0627\u0644\u0645\u062a\u062e\u0635\u0635\u064a\u0646 \u0641\u064a \u0639\u062f\u0629 \u0645\u062c\u0627\u0644\u0627\u062a \u0645\u062b\u0644 \u0627\u0644\u0625\u0633\u0639\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0648\u0644\u064a\u0629 \u0648\u0627\u0644\u063a\u0648\u0635 \u0648\u063a\u064a\u0631\u0647\u0627.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"achievements-section scroll-reveal\">\r\n <h2>\u0625\u0646\u062c\u0627\u0632\u0627\u062a\u0646\u0627<\/h2>\r\n <div class=\"stats-grid\">\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\" data-target=\"6135\" dir=\"ltr\"><\/div>\r\n <div class=\"stat-label\">\u0645\u062a\u0637\u0648\u0639<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\" data-target=\"11603\"><\/div>\r\n <div class=\"stat-label\">\u0639\u0645\u0644\u064a\u0629 \u0625\u0646\u0642\u0627\u0630 \u0645\u0643\u062a\u0645\u0644\u0629<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\" data-target=\"60\"><\/div>\r\n <div class=\"stat-label\">\u0645\u062f\u064a\u0646\u0629 \u0645\u063a\u0637\u0627\u0629<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\" data-target=\"13\"><\/div>\r\n <div class=\"stat-label\">\u0645\u0646\u0637\u0642\u0629 \u0625\u062f\u0627\u0631\u064a\u0629<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <section class=\"services scroll-reveal\">\r\n <h2>\u0627\u0644\u0645\u062c\u0627\u0644\u0627\u062a \u0648\u0627\u0644\u062f\u0648\u0631\u0627\u062a \u0627\u0644\u0645\u062a\u062e\u0635\u0635\u0647<\/h2>\r\n <div class=\"services-grid\">\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/dronerescueicon.webp\" alt=\"\u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0627\u0644\u062c\u0648\u064a icon\">\r\n <\/div>\r\n <div class=\"service-title\">\u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0627\u0644\u062c\u0648\u064a<\/div>\r\n <div class=\"service-description\">\u0641\u0631\u0642 \u0645\u062a\u062e\u0635\u0635\u0629 \u0641\u064a \u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0628\u0627\u0644\u0637\u0627\u0626\u0631\u0627\u062a \u0627\u0644\u0645\u0631\u0648\u062d\u064a\u0629 \u0648\u0627\u0644\u0637\u0627\u0626\u0631\u0627\u062a \u0627\u0644\u0645\u0633\u064a\u0631\u0629<\/div>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/searescueicon.webp\" alt=\"\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0627\u0644\u0628\u062d\u0631\u064a icon\">\r\n <\/div>\r\n <div class=\"service-title\">\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0627\u0644\u0628\u062d\u0631\u064a<\/div>\r\n <div class=\"service-description\">\u062e\u0628\u0631\u0627\u0621 \u0641\u064a \u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0627\u0644\u0628\u062d\u0631\u064a \u0648\u0627\u0644\u063a\u0648\u0635 \u0648\u0627\u0644\u0628\u062d\u062b \u062a\u062d\u062a \u0627\u0644\u0645\u0627\u0621<\/div>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/airrescueicon-1.webp\" alt=\"\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0627\u0644\u0628\u0631\u064a icon\">\r\n <\/div>\r\n <div class=\"service-title\">\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0627\u0644\u0628\u0631\u064a<\/div>\r\n <div class=\"service-description\">\u0645\u062a\u062e\u0635\u0635\u0648\u0646 \u0641\u064a \u0625\u0646\u0642\u0627\u0630 \u0627\u0644\u0639\u0627\u0644\u0642\u064a\u0646 \u0648 \u0627\u0644\u0645\u0641\u0642\u0648\u062f\u064a\u0646 \u0641\u064a \u0627\u0644\u0628\u0631 \u0648\u0627\u0644\u0631\u0645\u0627\u0644<\/div>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/firstaidicon.webp\" alt=\"\u0627\u0644\u0625\u0633\u0639\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0648\u0644\u064a\u0629 icon\">\r\n <\/div>\r\n <div class=\"service-title\">\u0627\u0644\u0625\u0633\u0639\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0648\u0644\u064a\u0629<\/div>\r\n <div class=\"service-description\">\u062a\u062f\u0631\u064a\u0628 \u0648\u062a\u0623\u0647\u064a\u0644 \u0627\u0644\u0645\u062a\u0637\u0648\u0639\u064a\u0646 \u0639\u0644\u0649 \u0623\u062d\u062f\u062b \u062a\u0642\u0646\u064a\u0627\u062a \u0627\u0644\u0625\u0633\u0639\u0627\u0641\u0627\u062a \u0627\u0644\u0623\u0648\u0644\u064a\u0629<\/div>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/trainingicon.webp\" alt=\"\u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0648\u0627\u0644\u062a\u0623\u0647\u064a\u0644 icon\">\r\n <\/div>\r\n <div class=\"service-title\">\u0627\u0644\u062a\u062f\u0631\u064a\u0628 \u0648\u0627\u0644\u062a\u0623\u0647\u064a\u0644<\/div>\r\n <div class=\"service-description\">\u0628\u0631\u0627\u0645\u062c \u062a\u062f\u0631\u064a\u0628\u064a\u0629 \u0645\u062a\u0642\u062f\u0645\u0629 \u0644\u0625\u0639\u062f\u0627\u062f \u0627\u0644\u0645\u062a\u0637\u0648\u0639\u064a\u0646 \u0627\u0644\u0645\u062d\u062a\u0631\u0641\u064a\u0646<\/div>\r\n <\/div>\r\n <div class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/partnershipicon.webp\" alt=\"\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u064a\u0629 icon\">\r\n <\/div>\r\n <div class=\"service-title\">\u0627\u0644\u0634\u0631\u0627\u0643\u0627\u062a \u0627\u0644\u0645\u062c\u062a\u0645\u0639\u064a\u0629<\/div>\r\n <div class=\"service-description\">\u0628\u0646\u0627\u0621 \u0634\u0631\u0627\u0643\u0627\u062a \u0627\u0633\u062a\u0631\u0627\u062a\u064a\u062c\u064a\u0629 \u0644\u062a\u062d\u0642\u064a\u0642 \u0631\u0624\u064a\u0629 \u0627\u0644\u0645\u0645\u0644\u0643\u0629 2030<\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n\r\n\r\n <section class=\"video-section scroll-reveal\">\r\n <h2>\u0639\u0628\u062f\u0627\u0644\u0639\u0632\u064a\u0632 \u0627\u0644\u0628\u0627\u0631\u0642\u064a\u060c \u0645\u0624\u0633\u0633 \u0648\u0642\u0627\u0626\u062f \u0627\u0644\u062c\u0645\u0639\u064a\u0629<\/h2>\r\n\t\t<h2 style=\"color: #e0b11e;\">\u0625\u0633\u062a\u0636\u0627\u0641\u0629 MBC1 \u0641\u064a \u0628\u0631\u0646\u0627\u0645\u062c \u0645\u0639\u0627\u0644\u064a \u0627\u0644\u0645\u0648\u0627\u0637\u0646<\/h2>\r\n <div class=\"video-container\">\r\n <iframe\r\n src=\"https:\/\/www.youtube.com\/embed\/pIZQto-c4e4?si=4n0TXWZbM5hrFbb-\"\r\n title=\"\u0639\u0628\u062f\u0627\u0644\u0639\u0632\u064a\u0632 \u0627\u0644\u0628\u0627\u0631\u0642\u064a\u060c \u0645\u0624\u0633\u0633 \u0648\u0642\u0627\u0626\u062f \u0627\u0644\u062c\u0645\u0639\u064a\u0629 \u0625\u0633\u062a\u0636\u0627\u0641\u0629 MBC1 \u0641\u064a \u0628\u0631\u0646\u0627\u0645\u062c \u0645\u0639\u0627\u0644\u064a \u0627\u0644\u0645\u0648\u0627\u0637\u0646\"\r\n frameborder=\"0\"\r\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\r\n allowfullscreen>\r\n <\/iframe>\r\n <\/div>\r\n <\/section>\r\n\t\r\n\r\n\r\n<!--\r\n<section>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Tajawal:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\r\n\r\n <div class=\"employees-of-the-month-section scroll-reveal\">\r\n <h1 class=\"employees-section-title\">\u0646\u0645\u0627\u0630\u062c \u064a\u064f\u0641\u062a\u062e\u0631 \u0628\u0650\u0647\u0627<\/h1>\r\n\r\n <div class=\"employees-container\">\r\n <div class=\"employee-card\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/userplaceholder\/\" alt=\"Employee 1\">\r\n <div class=\"employee-info\">\r\n <h2 class=\"employee-name\">\u0633\u0627\u0631\u0629 \u0627\u0644\u0623\u062d\u0645\u062f<\/h2>\r\n <p class=\"employee-achievement\">\u062a\u0641\u0627\u0646\u064a \u0645\u062a\u0645\u064a\u0632<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"employee-card\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/userplaceholder\/\" alt=\"Employee 2\">\r\n <div class=\"employee-info\">\r\n <h2 class=\"employee-name\">\u0641\u0627\u0637\u0645\u0629 \u0627\u0644\u0632\u0647\u0631\u0627\u0646\u064a<\/h2>\r\n <p class=\"employee-achievement\">\u0627\u0644\u0627\u0628\u062a\u0643\u0627\u0631 \u0648\u0627\u0644\u0625\u0628\u062f\u0627\u0639<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"employee-card\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/userplaceholder\/\" alt=\"Employee 3\">\r\n <div class=\"employee-info\">\r\n <h2 class=\"employee-name\">\u062e\u0627\u0644\u062f \u0627\u0644\u0645\u0646\u0635\u0648\u0631\u064a<\/h2>\r\n <p class=\"employee-achievement\">\u0627\u0644\u0642\u064a\u0627\u062f\u0629 \u0627\u0644\u0627\u0633\u062a\u062b\u0646\u0627\u0626\u064a\u0629<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"employee-card\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/userplaceholder\/\" alt=\"Employee 4\">\r\n <div class=\"employee-info\">\r\n <h2 class=\"employee-name\">\u0646\u0648\u0631 \u0627\u0644\u0635\u0628\u0627\u062d<\/h2>\r\n <p class=\"employee-achievement\">\u0627\u0644\u062a\u0645\u064a\u0632 \u0641\u064a \u062e\u062f\u0645\u0629 \u0627\u0644\u0639\u0645\u0644\u0627\u0621<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"employee-card\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/userplaceholder\/\" alt=\"Employee 5\">\r\n <div class=\"employee-info\">\r\n <h2 class=\"employee-name\">\u0623\u062d\u0645\u062f \u0627\u0644\u0639\u0644\u064a<\/h2>\r\n <p class=\"employee-achievement\">\u0627\u0644\u0639\u0645\u0644 \u0627\u0644\u062c\u0645\u0627\u0639\u064a \u0648\u0627\u0644\u062a\u0639\u0627\u0648\u0646<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"employee-card\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/userplaceholder\/\" alt=\"Employee 6\">\r\n <div class=\"employee-info\">\r\n <h2 class=\"employee-name\">\u0633\u0627\u0631\u0647 \u0627\u0644\u0645\u0628\u0627\u0631\u0643<\/h2>\r\n <p class=\"employee-achievement\">\u0625\u0646\u062c\u0627\u0632\u0627\u062a \u0645\u0644\u062d\u0648\u0638\u0629<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n-->\r\n\r\n<section class=\"partners-section scroll-reveal\" style=\"padding: 4rem 2rem; background: linear-gradient(135deg, #FDFDFD 0%, #E9F4E9 100%); margin: 2rem auto; max-width: 1200px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.08); direction: rtl;\">\r\n <div style=\"display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem;\">\r\n\r\n <div style=\"flex: 1; min-width: 250px; text-align: right;\">\r\n <h2 style=\"font-size: 2.8rem; color: #3B5F2A; font-weight: 700; margin-bottom: 0.5rem;\">\u0627\u0644\u0634\u0631\u0643\u0627\u0621<\/h2>\r\n <h3 style=\"font-size: 1.4rem; color: #5A6B4A; font-weight: 500;\">\u0634\u0631\u0643\u0627\u0621 \u0627\u0644\u0639\u0645\u0644\u064a\u0627\u062a \u0627\u0644\u062e\u064a\u0631\u064a\u0629 \u0627\u0644\u062a\u0637\u0648\u0639\u064a\u0629<\/h3>\r\n\r\n <\/div>\r\n\r\n <div style=\"flex: 2; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.5rem;\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/02\/ministry-of-interior.jpg\" alt=\"\u0648\u0632\u0627\u0631\u0629 \u0627\u0644\u062f\u0627\u062e\u0644\u064a\u0629\" style=\"width: 100px; height: 100px; object-fit: contain; border-radius: 20px; background: #fff; padding: 10px;\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/02\/civil-defense.jpg\" alt=\"\u0627\u0644\u062f\u0641\u0627\u0639 \u0627\u0644\u0645\u062f\u0646\u064a\" style=\"width: 100px; height: 100px; object-fit: contain; border-radius: 20px; background: #fff; padding: 10px;\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/02\/police.jpg\" alt=\"\u0627\u0644\u0634\u0631\u0637\u0629\" style=\"width: 100px; height: 100px; object-fit: contain; border-radius: 20px; background: #fff; padding: 10px;\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/02\/saudi-red-crescent-authority.jpg\" alt=\"\u0647\u064a\u0626\u0629 \u0627\u0644\u0647\u0644\u0627\u0644 \u0627\u0644\u0623\u062d\u0645\u0631 \u0627\u0644\u0633\u0639\u0648\u062f\u064a\" style=\"width: 100px; height: 100px; object-fit: contain; border-radius: 20px; background: #fff; padding: 10px;\">\r\n <img decoding=\"async\" src=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/02\/national-platform-for-volunteer-work.jpg\" alt=\"\u0627\u0644\u0645\u0646\u0635\u0629 \u0627\u0644\u0648\u0637\u0646\u064a\u0629 \u0644\u0644\u0639\u0645\u0644 \u0627\u0644\u062a\u0637\u0648\u0639\u064a\" style=\"width: 100px; height: 100px; object-fit: contain; border-radius: 20px; background: #fff; padding: 10px;\">\r\n\r\n<\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n <script>\r\n \/\/ Scroll reveal animation\r\n function reveal() {\r\n const reveals = document.querySelectorAll('.scroll-reveal');\r\n\r\n for (let i = 0; i < reveals.length; i++) {\r\n const windowHeight = window.innerHeight;\r\n const elementTop = reveals[i].getBoundingClientRect().top;\r\n const elementVisible = 150; \/\/ When element is 150px into view\r\n\r\n if (elementTop < windowHeight - elementVisible) {\r\n reveals[i].classList.add('revealed');\r\n } else {\r\n \/\/ Optional: remove 'revealed' class if element scrolls out of view\r\n \/\/ reveals[i].classList.remove('revealed');\r\n }\r\n }\r\n }\r\n\r\n window.addEventListener('scroll', reveal);\r\n\r\n \/\/ Trigger reveal on load\r\n window.addEventListener('load', reveal);\r\n\r\n \/\/ Counter animation\r\nfunction animateCounters() {\r\n const counters = document.querySelectorAll('.stat-number');\r\n\r\n const observer = new IntersectionObserver((entries, observer) => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n const counter = entry.target;\r\n\r\n \/\/ Only animate if not already animated\r\n if (!counter.dataset.animated) {\r\n \/\/ Get clean numeric target from data-target attribute\r\n const target = parseInt(counter.dataset.target, 10);\r\n\r\n if (isNaN(target)) {\r\n counter.textContent = '\u0644\u064a\u0633 \u0631\u0642\u0645\u064b\u0627+';\r\n return;\r\n }\r\n\r\n let start = 0;\r\n const duration = 2000; \/\/ 2 seconds\r\n let startTime = null;\r\n\r\n \/\/ Reveal counter now that animation is ready\r\n counter.style.visibility = 'visible';\r\n\r\n function step(currentTime) {\r\n if (!startTime) startTime = currentTime;\r\n const progress = (currentTime - startTime) \/ duration;\r\n const currentValue = Math.min(progress, 1) * target;\r\n\r\n counter.textContent = '+' + Math.ceil(currentValue).toLocaleString();\r\n\r\n if (progress < 1) {\r\n requestAnimationFrame(step);\r\n } else {\r\n counter.dataset.animated = 'true'; \/\/ Mark as animated\r\n observer.unobserve(counter); \/\/ Stop observing once animated\r\n }\r\n }\r\n\r\n requestAnimationFrame(step);\r\n }\r\n }\r\n });\r\n }, { threshold: 0.2 }); \/\/ Trigger when 20% of the element is visible\r\n\r\n counters.forEach(counter => {\r\n \/\/ Hide until JS is ready\r\n counter.style.visibility = 'hidden';\r\n observer.observe(counter);\r\n });\r\n}\r\n\r\n\r\n \/\/ Call animateCounters when the page loads\r\n window.addEventListener('load', animateCounters);\r\n\r\n\r\n \/\/ Carousel Script for leadership section\r\n const leadershipCarousel = document.querySelector('.leadership-carousel');\r\n const prevBtn = document.querySelector('.leadership-section .prev-btn');\r\n const nextBtn = document.querySelector('.leadership-section .next-btn');\r\n const dotsContainer = document.querySelector('.leadership-section .carousel-dots');\r\n const carouselItems = Array.from(leadershipCarousel.children);\r\n const totalItems = carouselItems.length;\r\n let currentSlideIndex = 0; \/\/ Tracks the index of the primary visible item for navigation\r\n\r\n function updateCarousel() {\r\n if (carouselItems[currentSlideIndex]) {\r\n carouselItems[currentSlideIndex].scrollIntoView({\r\n behavior: 'smooth',\r\n inline: 'start' \/\/ For RTL, 'start' means the right edge\r\n });\r\n }\r\n\r\n \/\/ Update active dot\r\n dotsContainer.innerHTML = ''; \/\/ Clear existing dots\r\n for (let i = 0; i < totalItems; i++) {\r\n const dot = document.createElement('span');\r\n dot.classList.add('carousel-dot');\r\n if (i === currentSlideIndex) {\r\n dot.classList.add('active');\r\n }\r\n dot.addEventListener('click', () => {\r\n currentSlideIndex = i;\r\n updateCarousel();\r\n });\r\n dotsContainer.appendChild(dot);\r\n }\r\n\r\n \/\/ Update navigation button states\r\n prevBtn.disabled = currentSlideIndex === 0;\r\n nextBtn.disabled = currentSlideIndex >= totalItems - 1; \/\/ Assuming 1 item visible\r\n }\r\n\r\n \/\/ Event Listeners for buttons\r\n prevBtn.addEventListener('click', () => {\r\n if (currentSlideIndex > 0) {\r\n currentSlideIndex--;\r\n updateCarousel();\r\n }\r\n });\r\n\r\n nextBtn.addEventListener('click', () => {\r\n if (currentSlideIndex < totalItems - 1) {\r\n currentSlideIndex++;\r\n updateCarousel();\r\n }\r\n });\r\n\r\n \/\/ For manual scrolling, update active dot\r\n let scrollTimeout;\r\n leadershipCarousel.addEventListener('scroll', () => {\r\n clearTimeout(scrollTimeout);\r\n scrollTimeout = setTimeout(() => {\r\n const carouselRect = leadershipCarousel.getBoundingClientRect();\r\n let closestIndex = 0;\r\n let minDistance = Infinity;\r\n\r\n carouselItems.forEach((item, index) => {\r\n const itemRect = item.getBoundingClientRect();\r\n \/\/ Calculate distance from item's right edge to carousel's right edge (start in RTL)\r\n const distance = Math.abs(itemRect.right - carouselRect.right);\r\n\r\n if (distance < minDistance) {\r\n minDistance = distance;\r\n closestIndex = index;\r\n }\r\n });\r\n if (currentSlideIndex !== closestIndex) { \/\/ Only update if necessary\r\n currentSlideIndex = closestIndex;\r\n updateCarousel(); \/\/ Re-render dots and buttons\r\n }\r\n }, 150); \/\/ Debounce scroll event\r\n });\r\n\r\n \/\/ Initialize carousel on load\r\n window.addEventListener('load', updateCarousel);\r\n <\/script>\r\n\t\r\n<!--\t\r\n\t<script>\r\n\t\r\n\tdocument.addEventListener('DOMContentLoaded', function() {\r\n const scrollButton = document.getElementById('scrollButton');\r\n\r\n if (scrollButton) { \/\/ Ensure the button exists before adding the event listener\r\n scrollButton.addEventListener('click', function(event) {\r\n event.preventDefault(); \/\/ Prevent default link behavior (like jumping to the top)\r\n\r\n \/\/Scroll to the bottom of the page\r\n window.scrollTo({\r\n top: document.body.scrollHeight, \/\/ Scrolls to the total height of the body\r\n behavior: 'smooth' \/\/ Makes the scroll animation smooth\r\n });\r\n });\r\n }\r\n });\r\n\t\r\n\t<\/script>\r\n\t\r\n-->\t\r\n\r\n<script>\r\n\r\n\/\/ No JavaScript is strictly needed for this layout as it's primarily CSS-driven.\r\n\/\/ However, you could add dynamic content loading, animations, or interactive elements here if desired.\r\n\r\n\/\/ Example of a simple interactive element (optional):\r\n\/\/ Add a subtle hover effect that scales the image slightly\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n const employeeCards = document.querySelectorAll('.employee-card');\r\n\r\n employeeCards.forEach(card => {\r\n card.addEventListener('mouseenter', () => {\r\n const img = card.querySelector('img');\r\n if (img) {\r\n img.style.transform = 'scale(1.05)';\r\n img.style.transition = 'transform 0.2s ease-in-out';\r\n }\r\n });\r\n\r\n card.addEventListener('mouseleave', () => {\r\n const img = card.querySelector('img');\r\n if (img) {\r\n img.style.transform = 'scale(1)';\r\n }\r\n });\r\n });\r\n});\r\n\r\n<\/script>\r\n\r\n<script>\r\n document.addEventListener('DOMContentLoaded', function() {\r\n const imageUrls = [\r\n\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/the-holy-mosque-in-mecca.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/first-aid-in-mecca.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/field-team.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/field-documentation-of-rescue-operations.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/documenting-the-efforts-of-volunteers.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/coordination-of-saed-research-teams.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/saed-for-search-and-rescue-equipment-and-tools.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/follow-the-mission.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/volunteer-efforts-in-search-and-rescue.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/documenting-the-association-activities.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/humanitarian-work-in-the-holy-sanctuary.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/rapid-response-to-emergencies.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/volunteer-mission.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/images-documenting-field-readiness.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/cooperation-between-rescue-teams.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/volunteers-while-performing-their-duty.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/field-documentation-of-the-saed-associationy.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/saed-team-assisted-during-the-field-scan.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/coordination-of-the-saed-teams-in-mecca.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/volunteer-participation-in-tasks.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/saed-team-to-serve-the-guests-of-allah.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/teamwork-of-the-saed-teams.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/guiding-the-groups-within-the-makkah-holy-mosque.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/readiness-of-the-saed-search-teams.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/equipment-for-the-saed-teams-at-the-grand-mosque.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/humanitarian-operations-in-the-holy-sanctuary.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/saed-volunteer-teams.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/association-volunteers-at-the-haram.jpg\",\r\n \"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/06\/saed-with-field-tasks.jpg\",\r\n ];\r\n\r\n const carouselContainer = document.querySelector('.carousel-container');\r\n let currentImageIndex = 0;\r\n\r\n \/\/ Preload images and create image elements\r\n const images = imageUrls.map(url => {\r\n const img = new Image();\r\n img.src = url;\r\n img.alt = \"Carousel image\";\r\n img.classList.add('carousel-image');\r\n carouselContainer.appendChild(img);\r\n return img;\r\n });\r\n\r\n function showImage(index) {\r\n images.forEach((img, i) => {\r\n if (i === index) {\r\n img.classList.add('active');\r\n } else {\r\n img.classList.remove('active');\r\n }\r\n });\r\n }\r\n\r\n \/\/ Initialize the first image\r\n if (images.length > 0) {\r\n showImage(currentImageIndex);\r\n }\r\n\r\n \/\/ Automatic image switching\r\n setInterval(() => {\r\n currentImageIndex = (currentImageIndex + 1) % images.length;\r\n showImage(currentImageIndex);\r\n }, 3000); \/\/ Change image every 3 seconds (3000 milliseconds)\r\n });\r\n<\/script>\r\n\t\r\n<\/body>\r\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>\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0643\u0646 \u0627\u0644\u064a\u062f \u0627\u0644\u064e\u0651\u062a\u0650\u064a \u062a\u064f\u0633\u0627\u0639\u062f \u0646\u062c\u062a\u0645\u0639 \u0639\u0644\u0649 \u0646\u064a\u0629 … <\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630","_seopress_titles_desc":"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0641\u0631\u064a\u0642 \u062a\u0637\u0648\u0639\u064a \u062a\u0623\u0633\u0633 \u0639\u0627\u0645 2016 \u0644\u062a\u0642\u062f\u064a\u0645 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0648\u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0644\u0644\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u0637\u0627\u0631\u0626\u0629 \u0628\u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u062f\u0641\u0627\u0639 \u0627\u0644\u0645\u062f\u0646\u064a \u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639.","_seopress_robots_index":"","footnotes":""},"class_list":["post-3021","page","type-page","status-publish","hentry"],"aioseo_notices":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.0 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 - \u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630<\/title>\n<meta name=\"description\" content=\"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0641\u0631\u064a\u0642 \u062a\u0637\u0648\u0639\u064a \u062a\u0623\u0633\u0633 \u0639\u0627\u0645 2016 \u0644\u062a\u0642\u062f\u064a\u0645 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0648\u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0644\u0644\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u0637\u0627\u0631\u0626\u0629 \u0628\u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u062f\u0641\u0627\u0639 \u0627\u0644\u0645\u062f\u0646\u064a \u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ssr.org.sa\/en\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 - \u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630\" \/>\n<meta property=\"og:description\" content=\"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0641\u0631\u064a\u0642 \u062a\u0637\u0648\u0639\u064a \u062a\u0623\u0633\u0633 \u0639\u0627\u0645 2016 \u0644\u062a\u0642\u062f\u064a\u0645 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0648\u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0644\u0644\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u0637\u0627\u0631\u0626\u0629 \u0628\u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u062f\u0641\u0627\u0639 \u0627\u0644\u0645\u062f\u0646\u064a \u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ssr.org.sa\/en\/\" \/>\n<meta property=\"og:site_name\" content=\"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630\" \/>\n<meta property=\"article:modified_time\" content=\"2026-03-13T07:44:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/dronerescueicon.webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@saeid__911\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ssr.org.sa\/\",\"url\":\"https:\/\/ssr.org.sa\/\",\"name\":\"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 - \u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630\",\"isPartOf\":{\"@id\":\"https:\/\/ssr.org.sa\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/ssr.org.sa\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/ssr.org.sa\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/dronerescueicon.webp\",\"datePublished\":\"2025-06-13T16:18:54+00:00\",\"dateModified\":\"2026-03-13T07:44:06+00:00\",\"description\":\"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0641\u0631\u064a\u0642 \u062a\u0637\u0648\u0639\u064a \u062a\u0623\u0633\u0633 \u0639\u0627\u0645 2016 \u0644\u062a\u0642\u062f\u064a\u0645 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0648\u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0644\u0644\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u0637\u0627\u0631\u0626\u0629 \u0628\u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u062f\u0641\u0627\u0639 \u0627\u0644\u0645\u062f\u0646\u064a \u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639.\",\"breadcrumb\":{\"@id\":\"https:\/\/ssr.org.sa\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ssr.org.sa\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ssr.org.sa\/#primaryimage\",\"url\":\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/dronerescueicon.webp\",\"contentUrl\":\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/dronerescueicon.webp\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ssr.org.sa\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ssr.org.sa\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ssr.org.sa\/#website\",\"url\":\"https:\/\/ssr.org.sa\/\",\"name\":\"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630\",\"description\":\"\u062c\u0645\u0639\u064a\u0629 \u062a\u0637\u0648\u0639\u064a\u0629 \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630\",\"publisher\":{\"@id\":\"https:\/\/ssr.org.sa\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ssr.org.sa\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ssr.org.sa\/#organization\",\"name\":\"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630\",\"url\":\"https:\/\/ssr.org.sa\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ssr.org.sa\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/02\/non-upscales.png\",\"contentUrl\":\"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/02\/non-upscales.png\",\"width\":1805,\"height\":1713,\"caption\":\"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630\"},\"image\":{\"@id\":\"https:\/\/ssr.org.sa\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/saeid__911\",\"https:\/\/www.instagram.com\/saeid__911\/\",\"https:\/\/www.youtube.com\/@saeid_911\/videos\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 - \u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630","description":"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0641\u0631\u064a\u0642 \u062a\u0637\u0648\u0639\u064a \u062a\u0623\u0633\u0633 \u0639\u0627\u0645 2016 \u0644\u062a\u0642\u062f\u064a\u0645 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0648\u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0644\u0644\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u0637\u0627\u0631\u0626\u0629 \u0628\u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u062f\u0641\u0627\u0639 \u0627\u0644\u0645\u062f\u0646\u064a \u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ssr.org.sa\/en\/","og_locale":"en_US","og_type":"article","og_title":"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 - \u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630","og_description":"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0641\u0631\u064a\u0642 \u062a\u0637\u0648\u0639\u064a \u062a\u0623\u0633\u0633 \u0639\u0627\u0645 2016 \u0644\u062a\u0642\u062f\u064a\u0645 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0648\u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0644\u0644\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u0637\u0627\u0631\u0626\u0629 \u0628\u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u062f\u0641\u0627\u0639 \u0627\u0644\u0645\u062f\u0646\u064a \u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639.","og_url":"https:\/\/ssr.org.sa\/en\/","og_site_name":"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630","article_modified_time":"2026-03-13T07:44:06+00:00","og_image":[{"url":"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/dronerescueicon.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@saeid__911","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/ssr.org.sa\/","url":"https:\/\/ssr.org.sa\/","name":"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629 - \u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630","isPartOf":{"@id":"https:\/\/ssr.org.sa\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ssr.org.sa\/#primaryimage"},"image":{"@id":"https:\/\/ssr.org.sa\/#primaryimage"},"thumbnailUrl":"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/dronerescueicon.webp","datePublished":"2025-06-13T16:18:54+00:00","dateModified":"2026-03-13T07:44:06+00:00","description":"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0641\u0631\u064a\u0642 \u062a\u0637\u0648\u0639\u064a \u062a\u0623\u0633\u0633 \u0639\u0627\u0645 2016 \u0644\u062a\u0642\u062f\u064a\u0645 \u062e\u062f\u0645\u0627\u062a \u0627\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630 \u0648\u0627\u0644\u0627\u0633\u062a\u062c\u0627\u0628\u0629 \u0644\u0644\u062d\u0627\u0644\u0627\u062a \u0627\u0644\u0637\u0627\u0631\u0626\u0629 \u0628\u0627\u0644\u062a\u0639\u0627\u0648\u0646 \u0645\u0639 \u0627\u0644\u062f\u0641\u0627\u0639 \u0627\u0644\u0645\u062f\u0646\u064a \u0644\u062e\u062f\u0645\u0629 \u0627\u0644\u0645\u062c\u062a\u0645\u0639.","breadcrumb":{"@id":"https:\/\/ssr.org.sa\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ssr.org.sa\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ssr.org.sa\/#primaryimage","url":"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/dronerescueicon.webp","contentUrl":"https:\/\/ssr.org.sa\/wp-content\/uploads\/2026\/02\/dronerescueicon.webp"},{"@type":"BreadcrumbList","@id":"https:\/\/ssr.org.sa\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ssr.org.sa\/"},{"@type":"ListItem","position":2,"name":"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629"}]},{"@type":"WebSite","@id":"https:\/\/ssr.org.sa\/#website","url":"https:\/\/ssr.org.sa\/","name":"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630","description":"\u062c\u0645\u0639\u064a\u0629 \u062a\u0637\u0648\u0639\u064a\u0629 \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630","publisher":{"@id":"https:\/\/ssr.org.sa\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ssr.org.sa\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ssr.org.sa\/#organization","name":"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630","url":"https:\/\/ssr.org.sa\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ssr.org.sa\/#\/schema\/logo\/image\/","url":"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/02\/non-upscales.png","contentUrl":"https:\/\/ssr.org.sa\/wp-content\/uploads\/2025\/02\/non-upscales.png","width":1805,"height":1713,"caption":"\u062c\u0645\u0639\u064a\u0629 \u0633\u0627\u0639\u062f \u0644\u0644\u0628\u062d\u062b \u0648\u0627\u0644\u0625\u0646\u0642\u0627\u0630"},"image":{"@id":"https:\/\/ssr.org.sa\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/saeid__911","https:\/\/www.instagram.com\/saeid__911\/","https:\/\/www.youtube.com\/@saeid_911\/videos"]}]}},"_links":{"self":[{"href":"https:\/\/ssr.org.sa\/en\/wp-json\/wp\/v2\/pages\/3021","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ssr.org.sa\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ssr.org.sa\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ssr.org.sa\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ssr.org.sa\/en\/wp-json\/wp\/v2\/comments?post=3021"}],"version-history":[{"count":304,"href":"https:\/\/ssr.org.sa\/en\/wp-json\/wp\/v2\/pages\/3021\/revisions"}],"predecessor-version":[{"id":3689,"href":"https:\/\/ssr.org.sa\/en\/wp-json\/wp\/v2\/pages\/3021\/revisions\/3689"}],"wp:attachment":[{"href":"https:\/\/ssr.org.sa\/en\/wp-json\/wp\/v2\/media?parent=3021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}